GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → leontrolski → Dnjs

leontrolski / Dnjs

Licence: mit
DOM Notation JS

Programming Languages

python
139335 projects - #7 most used programming language
go
31211 projects - #10 most used programming language

Labels

templateconfigmithril

Projects that are alternatives of or similar to Dnjs

Mrm
Codemods for your project config files
Stars: ✭ 900 (+662.71%)
Mutual labels:  config, template
Gf
GoFrame is a modular, powerful, high-performance and enterprise-class application development framework of Golang.
Stars: ✭ 6,501 (+5409.32%)
Mutual labels:  config, template
Remco
remco is a lightweight configuration management tool
Stars: ✭ 200 (+69.49%)
Mutual labels:  config, template
Gomplate
A flexible commandline tool for template rendering. Supports lots of local and remote datasources.
Stars: ✭ 1,270 (+976.27%)
Mutual labels:  config, template
Crucible
API CMS UI powered by Firebase, mithril, and my own dwindling sanity. Oh, and acronyms.
Stars: ✭ 116 (-1.69%)
Mutual labels:  mithril
Caldera
Caldera allows you to create a boilerplate service that ready to run inside the container (Go language)
Stars: ✭ 114 (-3.39%)
Mutual labels:  template
Angular Chrome Extension
angular chrome extension scaffold
Stars: ✭ 113 (-4.24%)
Mutual labels:  template
Android Studio Mvp Template Google Architecture
Stars: ✭ 111 (-5.93%)
Mutual labels:  template
P5 Text Xslate
Scalable template engine for Perl5
Stars: ✭ 117 (-0.85%)
Mutual labels:  template
Opencart Materialize
Template for OpenCart with Materialize
Stars: ✭ 117 (-0.85%)
Mutual labels:  template
Electron Boilerplate
Boilerplate to kickstart creating an app with Electron
Stars: ✭ 1,560 (+1222.03%)
Mutual labels:  template
Angular Template For Threejs
Angular Template For Three.js
Stars: ✭ 114 (-3.39%)
Mutual labels:  template
Gray Matter
Contributing Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.
Stars: ✭ 2,105 (+1683.9%)
Mutual labels:  config
Seven
Eleventy template using Bootstrap, Sass, Webpack, Vue.js powered search, includes lots of other features
Stars: ✭ 114 (-3.39%)
Mutual labels:  template
Open React Template
A free React landing page template designed to showcase open source projects, SaaS products, online services, and more. Made by
Stars: ✭ 1,956 (+1557.63%)
Mutual labels:  template
Jade Html5 Boilerplate
HTML5 Boilerplate ported to Jade. Great as a drop and go markup skeleton for Express apps.
Stars: ✭ 111 (-5.93%)
Mutual labels:  template
Dynaconf
Configuration Management for Python ⚙
Stars: ✭ 2,082 (+1664.41%)
Mutual labels:  config
Razzle Material Ui Styled Example
Razzle Material-UI example with Styled Components using Express with compression
Stars: ✭ 117 (-0.85%)
Mutual labels:  template
Bento Starter
🍱 Full-Stack solution to quickly build PWA applications with Vue.js and Firebase
Stars: ✭ 1,519 (+1187.29%)
Mutual labels:  template
Ultimateandroidtemplaterx
MVP Android App Template Ultimate Android Template MVP // Dagger 2 // Boilerplate // Bootstrap // Bottom Navigation Menu Material Design
Stars: ✭ 114 (-3.39%)
Mutual labels:  template
View All Similar Projects ➔

dnjs

dnjs is a pure subset of JavaScript that wants to replace (across many host languages):

  • overly limiting/baroque configuration languages
  • mucky string based html/xml templating

It is powerful yet familiar, and the reduced syntax makes it easy to implement (the reference implementation in Python took a couple of days to write) and easy to reason about. Currently the state is very alpha - see the TODO at the end.

╔══════════════════════════════╗
║ ╔═══════════════╗            ║
║ ║ ╔══════╗      ║            ║
║ ║ ║ JSON ║ dnjs ║ JavaScript ║
║ ║ ╚══════╝      ║            ║
║ ╚═══════════════╝            ║
╚══════════════════════════════╝

Installing the reference interpreter

pip install dnjs
dnjs --help

Examples

Some of these examples reference other files in the examples folder.

For configuration:

import { environments } from "./global.dn.js"

// names of the services to deploy
const serviceNames = ["signup", "account"]

const makeService = (environment, serviceName) => ({
    name: serviceName,
    ip: environment === environments.PROD ? "189.34.0.4" : "127.0.0.1"
})

export default (environment) => serviceNames.map(
    (v, i) => makeService(environment, v)
)

Let's use the reference implementation written in Python to run these (this also has a Python API documented below):

dnjs examples/configuration.dn.js examples/environment.json | jq

Gives us:

[
  {
    "name": "signup",
    "ip": "127.0.0.1"
  },
  {
    "name": "account",
    "ip": "127.0.0.1"
  }
]

For html templating

dnjs prescribes functions for making html, that handily are a subset of mithril (this makes it possible to write powerful, reusable cross-language html components).

Given the file commentsPage.dn.js:

import m from "mithril"

import { page } from "./basePage.dn.js"

const commentList = (comments) => m("ul",
    comments.map((comment, i) => m("li", `Comment ${i} says: ${comment.text}`))
)

export default (comments) => page(commentList(comments))

Then in a python webserver we can render the file as html:

from dnjs import render

@app.route("/some-route"):
def some_route():
    ...
    return render("commentsPage.dn.js", comments)

And the endpoint will return:

<html>
    <head>
        <script src="someScript.js">
        </script>
    </head>
    <body>
        <ul>
            <li>
                Comment 0 says: hiya!
            </li>
            <li>
                Comment 1 says: oioi
            </li>
        </ul>
    </body>
</html>

Or we can use the same components on the frontend with mithril:

import page from "../commentsPage.dn.js"
...
m.mount(document.body, page)

Or we can render the html on the command line similar to before:

dnjs examples/commentsPage.dn.js examples/comments.json --html

Note, that without the --html flag, we still make the following JSON, the conversion to html is a post-processing stage:

{
  "tag": "html",
  "attrs": {
    "className": ""
  },
  "children": [
    {
      "tag": "head",
      "attrs": {
...

For css templating

Using --css will post-process eg:

export default {
  ".bold": {"font-weight": "bold"},
  ".red": {"color": "red"},
}

to:

.bold {
    font-weight: bold;
}
.red {
    color: red;
}

As a jq replacement

JSON='[{foo: 1, bar: "one"}, {foo: 2, bar: "two"}]'
echo $JSON | dnjs - -p 'a=>a.map(b=>[b.bar, b.foo])'

[["one", 1], ["two", 2]]

csv

echo $JSON | dnjs - -p 'a=>a.map(b=>[b.bar, b.foo])' --csv

"one",1
"two",2

csv, raw

echo $JSON | dnjs - -p 'a=>a.map(b=>[b.bar, b.foo])' --csv --raw

one,1
two,2

jsonl

(While dnjs is implemented in python, this is very slow).

JSON='{foo: 1, bar: "one"}\n{foo: 2, bar: "two"}'
echo $JSON | while read l; do echo $l | dnjs - -p 'a=>a.bar' --raw; done

one
two

Flattening

Remember, you can flatten arrays with:

.reduce((a, b)=>[...a, ...b], [])

How exactly does dnjs extend JSON?

Remember dnjs is a restriction of JavaScript, the aim is not to implement all of it, any more than JSON is.

Here are all the extensions to JSON:

  • Comments with //.
  • Optional trailing commas.
  • Unquoted keys in objects.
  • import { c } from "./b.dn.js", import b from "./b.dn.js". Non-local imports are simply ignored (so as to allow importing m as anything).
  • export default a, export const b = c.
  • dicts and lists can be splatted with rest syntax: {...a}/[...a].
  • Functions can be defined with const f = (a, b) => c syntax. Brackets are not required for one argument, functions are called with the number of arguments provided.
  • Ternary expressions, only in the form a === b ? c : d. Equality should be implemented however JavaScript does.
  • Map, filter, reduce, map over dict, dict from entries, in the form a.map((v, i) => b), a.filter((v, i) => b), a.reduce((x, y) => [...x, ...y], []), Object.entries(a).map(([k, v], i) => b), Object.fromEntries(a).
  • Hyperscript, somewhat compatible with mithril - m("sometag#some-id.some-class.other-class", {"href": "foo.js", "class": ["another-class"]}, children), this evaluates to dicts like {"tag": "sometag", "attrs": {"id": "some-id", className: "some-class other-class another-class", "href": "foo.js", "children": children}. m.trust(a) to not escape html.
  • Multiline templates in the form `foo ${a}`, dedent(`foo ${a}`). dedent should work the same as this npm package.
  • Lists have .length, .includes(a) attributes.

Name

Originally the name stood for DOM Notation JavaScript.

Python

API

These functions return JSON-able data:

from dnjs import get_default_export, get_named_export

get_default_export(path)
get_named_export(path, name)

This function returns html as a str:

from dnjs import render

render(path, *values)

The types used throughout dnjs are fairly simple dataclasss , there's not much funny stuff going on in the code - check it out!

Development

Install dev requirements with:

pip install -r requirements-dev.txt

Run tests with:

pytest

Pin requirements with:

pip-compile -q; cat requirements.in requirements-dev.in | pip-compile -q --output-file=requirements-dev.txt -

Rebuild and publish (after upversioning) with:

# up version setup.py
rm dist/*; python setup.py sdist bdist_wheel; twine upload dist/*

JS

Javascript validation library to follow - see TODO section below.

Run tests with:

npm install
npm test

TODO

  • Use on something real to iron out bugs.
  • Spec out weird behaviour + make the same as js:
    • numbers
    • ===
  • Nicer docs:
    • Write up why we don't need filters like | to_human.
  • Consider onclick, onkeydown, on... functions... and how we want to handle them / attach them on reaching the browser in a isomophic setup.
  • Decide what else should be added:
    • Common string functions like upper case, replace etc?
    • parseInt etc..
  • Standalone (in c/rust/go? with Python bindings) to JSON program.
  • Write JS library that simply wraps mithril render and has a dnjs.isValid(path) function that uses the grammar (doing this may involve removing some lark-specific bits in the grammar.
  • Typescript support?
  • Consider what prevents dnjs from becoming a data interchange format - eg. infinite recursion. --safe mode? Specify PATHs that it's permitted to import from.
  • Allow importing JSON using Experimental JSON modules](https://nodejs.org/api/esm.html#esm_experimental_json_modules).
  • Remove accidental non-js compatability - eg. template grammar is a bit wacky.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].