git @ Cat's Eye Technologies DAM / 3024c4a
Give the ES6 build demo a better name (possibly not actually better) Chris Pressey 3 years ago
11 changed file(s) with 64 addition(s) and 59 deletion(s). Raw diff Collapse all Expand all
88 ------------
99
1010 **DAM** is a tiny library for creating bits of an HTML5 document.
11 (I'd say "for creating UIs" but that may be overstating it a tad.)
12 It's written in ES5 Javascript, so it can be used directly by most
13 modern web browsers, and it's about 1K in size (uncompressed). It
11 (I'd say "for creating user interfaces" but that may be overstating
12 it a tad.) It's written in ES5 Javascript, so it can be used directly
13 by most modern web browsers, or it can be transpiled to ES6 in a
14 frontend build process. It's about 1K in size (uncompressed), and it
1415 comes with a "standard widget library" that bloats it to about 6K.
1516
1617 The current version of DAM is 0.1.
2122 If you want to just drop DAM's basic functionality into a web page,
2223 you can use it like this:
2324
24 <script>var module = {};</script><script src="dam.js"></script><script>var DAM = module.exports;</script>
25 <script src="dam-plus-widgets-web.js"></script>
2526 <script>
2627 var div=DAM.maker('div'), p=DAM.maker('p'), span=DAM.maker('span'), button=DAM.maker('button');
2728 var d = div(
3233 );
3334 document.getElementById('container').appendChild(d);
3435 </script>
36
37 (You can also import DAM as an ES6 module in a frontend build process.
38 See the [demo/es6build/](demo/es6build/) directory of this repository
39 for an example of this.)
3540
3641 `DAM.maker` is a function that takes a tag string and returns a function that
3742 creates and returns a DOM Element with that tag.
5964
6065 A simple example based on the code above:
6166
62 <script>var module = {};</script><script src="dam.js"></script><script>var DAM = module.exports;</script>
67 <script src="dam-plus-widgets-web.js"></script>
6368 <script>
6469 var div=DAM.maker('div'), p=DAM.maker('p'), span=DAM.maker('span'), button=DAM.maker('button');
6570 function makeGreeting(config) {
113118 you can drop onto a web page, DAM ships with `dam-plus-widgets-web.js` for
114119 this purpose. Just:
115120
116 <script src="dam-plus-widgets-web.js">
121 <script src="dam-plus-widgets-web.js"></script>
117122
118123 and then you will have `DAM` as well as all the standard widget makers (nested
119124 under `DAM`) at your fingertips.
0 node_modules/
1 package-lock.json
2 demo/*.js
0 <!DOCTYPE html>
1 <head>
2 <meta charset="utf-8">
3 <title>Zlerp</title>
4 </head>
5 <body>
6
7 <h1>Zlerp</h1>
8
9 <div id="zlerp"></div>
10
11 <script src="zlerp.js"></script>
12
13 </body>
0 {
1 "name": "zlerp",
2 "version": "0.1.0",
3 "description": "Demonstration of using DAM in an ES6 project transpiled to ES5 with Browserify and Babel.",
4 "scripts": {
5 "build:dev": "browserify src/index.js -t [ babelify --presets [ @babel/preset-env ] ] > demo/zlerp.js",
6 "build": "browserify src/index.js -t [ babelify --presets [ @babel/preset-env ] ] -g [ envify --NODE_ENV production ] -g uglifyify | terser --compress --mangle | uglifyjs > demo/zlerp.js"
7 },
8 "devDependencies": {
9 "@babel/core": "^7.5.4",
10 "@babel/preset-env": "^7.5.4",
11 "babelify": "^10.0.0",
12 "browserify": "^16.3.0",
13 "envify": "^4.1.0",
14 "terser": "^4.1.2",
15 "uglify-js": "^3.6.0",
16 "uglifyify": "^5.0.1"
17 }
18 }
0 ../../../src/
0 import DAM from './DAM/dam.js'
1 import { makePanel, makeCheckbox } from './DAM/dam-widgets.js'
2
3
4 const div = DAM.maker('div')
5
6 document.getElementById('zlerp').appendChild(
7 div(
8 {style: "border: 1px solid blue"},
9 makePanel(
10 { title: "Options", isOpen: false },
11 makeCheckbox({ onchange: function(b) { console.log('understood:' + b) } }, "I understand"),
12 makeCheckbox({ onchange: function(b) { console.log('great:' + b) } }, "It's great")
13 )
14 )
15 )
+0
-3
eg/zlerp/.gitignore less more
0 node_modules/
1 package-lock.json
2 demo/*.js
+0
-14
eg/zlerp/demo/index.html less more
0 <!DOCTYPE html>
1 <head>
2 <meta charset="utf-8">
3 <title>Zlerp</title>
4 </head>
5 <body>
6
7 <h1>Zlerp</h1>
8
9 <div id="zlerp"></div>
10
11 <script src="zlerp.js"></script>
12
13 </body>
+0
-19
eg/zlerp/package.json less more
0 {
1 "name": "zlerp",
2 "version": "0.1.0",
3 "description": "Demonstration of using DAM in an ES6 project transpiled to ES5 with Browserify and Babel.",
4 "scripts": {
5 "build:dev": "browserify src/index.js -t [ babelify --presets [ @babel/preset-env ] ] > demo/zlerp.js",
6 "build": "browserify src/index.js -t [ babelify --presets [ @babel/preset-env ] ] -g [ envify --NODE_ENV production ] -g uglifyify | terser --compress --mangle | uglifyjs > demo/zlerp.js"
7 },
8 "devDependencies": {
9 "@babel/core": "^7.5.4",
10 "@babel/preset-env": "^7.5.4",
11 "babelify": "^10.0.0",
12 "browserify": "^16.3.0",
13 "envify": "^4.1.0",
14 "terser": "^4.1.2",
15 "uglify-js": "^3.6.0",
16 "uglifyify": "^5.0.1"
17 }
18 }
+0
-1
eg/zlerp/src/DAM less more
0 ../../../src/
+0
-16
eg/zlerp/src/index.js less more
0 import DAM from './DAM/dam.js'
1 import { makePanel, makeCheckbox } from './DAM/dam-widgets.js'
2
3
4 const div = DAM.maker('div')
5
6 document.getElementById('zlerp').appendChild(
7 div(
8 {style: "border: 1px solid blue"},
9 makePanel(
10 { title: "Options", isOpen: false },
11 makeCheckbox({ onchange: function(b) { console.log('understood:' + b) } }, "I understand"),
12 makeCheckbox({ onchange: function(b) { console.log('great:' + b) } }, "It's great")
13 )
14 )
15 )