lego-dom 0.0.3 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.ignore/auto.html +135 -0
- package/.ignore/test.html +73 -0
- package/about.md +523 -0
- package/index.js +26 -0
- package/main.js +459 -0
- package/main.test.js +86 -0
- package/package.json +14 -8
- package/README.md +0 -177
- package/dist/dom/index.js +0 -1
- package/dist/index.js +0 -1
- package/dist/utils/index.js +0 -1
- package/dist/utils/traverser.js +0 -1
- package/dist/veyors/basket.js +0 -2
- package/dist/veyors/brick.js +0 -1
- package/dist/veyors/index.js +0 -1
- package/dist/veyors/router.js +0 -1
- package/example/blocks/banner.lego +0 -0
- package/example/blocks/card.lego +0 -40
- package/example/blocks/form.lego +0 -31
- package/example/bricks/index.html +0 -50
- package/src/dom/index.ts +0 -0
- package/src/index.ts +0 -0
- package/src/utils/index.ts +0 -0
- package/src/utils/traverser.ts +0 -0
- package/src/veyors/basket.ts +0 -5
- package/src/veyors/brick.ts +0 -0
- package/src/veyors/index.ts +0 -0
- package/src/veyors/router.ts +0 -0
- package/tsconfig.json +0 -69
package/README.md
DELETED
|
@@ -1,177 +0,0 @@
|
|
|
1
|
-
Lego UI Library
|
|
2
|
-
===============
|
|
3
|
-
*Work In Progress and API will change drastically before 1.0.0*
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
Lego is a UI Library that borrows heavily from the children toy company's product of the same name `Lego` © Lego.
|
|
8
|
-
|
|
9
|
-
It allows for Reusable interlocking User Interfaces (Lego Blocks) to be composed into bricks that are managed in isolation for assembly at runtime.
|
|
10
|
-
|
|
11
|
-
__Most importantly Lego aims to be the simplest UI Lib a developer can learn...__
|
|
12
|
-
|
|
13
|
-
```html
|
|
14
|
-
|
|
15
|
-
<html lang="en">
|
|
16
|
-
<head>
|
|
17
|
-
<meta charset="UTF-8">
|
|
18
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
19
|
-
<title>Lego Example</title>
|
|
20
|
-
|
|
21
|
-
<style>
|
|
22
|
-
p {
|
|
23
|
-
color: red;
|
|
24
|
-
}
|
|
25
|
-
</style>
|
|
26
|
-
</head>
|
|
27
|
-
<body>
|
|
28
|
-
<!-- This is a lego block -->
|
|
29
|
-
<SomeFormWizard></SomeFormWizard>
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
<AnotherWizard>
|
|
33
|
-
<!-- whatever is nested inline in a block will be removed and appended as the last child of the loaded block -->
|
|
34
|
-
</AnotherWizard>
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
<script src="unpkg.com/lego/1.0"></script>
|
|
43
|
-
|
|
44
|
-
<!-- After loading Lego you can either link to where your basket is defined i.e. external js bundle -->
|
|
45
|
-
<script src="application.bundle.js"></script>
|
|
46
|
-
|
|
47
|
-
<!-- Or declare your lego blocks and bricks Inline -->
|
|
48
|
-
<script>
|
|
49
|
-
let basket = Lego.use("basket"); //case insensitive so .use("BaSkEt") works also
|
|
50
|
-
let router = Lego.use("router");
|
|
51
|
-
|
|
52
|
-
let AnotherWizard = router.get("./wizard.html");
|
|
53
|
-
|
|
54
|
-
let ProtectedBrick = router.get("./wizard.html", () => {
|
|
55
|
-
//This can be a global authentication function call to auth0 etc...
|
|
56
|
-
return router.get("./unathenticated.html");
|
|
57
|
-
})
|
|
58
|
-
|
|
59
|
-
//Explicit registration
|
|
60
|
-
Basket.register(AnotherWizard);
|
|
61
|
-
Basket.register(Router.get("./snippet.html")).as("SomeFormWizard");
|
|
62
|
-
</script>
|
|
63
|
-
</body>
|
|
64
|
-
</html>
|
|
65
|
-
```
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
There are 5 things to understand all in all to get a complete mastery of Lego JS. These are stylized under the acronym B.R.I.C.K to signify
|
|
69
|
-
how lego acts as a building platform with the meanings provided below.
|
|
70
|
-
|
|
71
|
-
- B is for Basket: This is similar to a real basket and is where all blocks `*.lego` pages are kept in memory for reuse.
|
|
72
|
-
```js
|
|
73
|
-
let basket = lego.use("basket");
|
|
74
|
-
```
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
- R is for Router: This is the global router responsible for loading and displaying blocks.
|
|
78
|
-
```js
|
|
79
|
-
let router = lego.use("router");
|
|
80
|
-
```
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
- I is for Interface: This is a proxy to the UI/DOM that helps tie your JS code to what appears on screen.
|
|
84
|
-
```js
|
|
85
|
-
let interface = lego.use("interface");
|
|
86
|
-
```
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
- C is for Connection: The connection holds utilities for fetching data and sending data to an API.
|
|
90
|
-
```js
|
|
91
|
-
let connection = lego.use("connection");
|
|
92
|
-
```
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
- K is for Keep: The Keep is the global store for your application to register and reuse state and services.
|
|
96
|
-
```js
|
|
97
|
-
const db = lego.use("keep");
|
|
98
|
-
|
|
99
|
-
class User = { /** Methods, Fields, Constructor, Localized state etc. */ }
|
|
100
|
-
|
|
101
|
-
db.register("User", User);
|
|
102
|
-
db.register("User.Enterprise", User); //scoped
|
|
103
|
-
```
|
|
104
|
-
|
|
105
|
-
```html
|
|
106
|
-
|
|
107
|
-
<script src="unpkg.com/lego-dom@1.0.0"></script>
|
|
108
|
-
<script></script>
|
|
109
|
-
```
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
<hr>
|
|
117
|
-
|
|
118
|
-
## Loading Files
|
|
119
|
-
|
|
120
|
-
<hr>
|
|
121
|
-
There are two ways to load a file in Lego
|
|
122
|
-
|
|
123
|
-
- Server Loaded
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
- Client Loaded
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
### Server Loaded
|
|
130
|
-
<hr>
|
|
131
|
-
|
|
132
|
-
Java/PHP/Python or XYZ code on the server is responsible for checking if the request is a Lego request (X-Lego) header present or if it is a plain old HTTP Request.
|
|
133
|
-
|
|
134
|
-
- The server can send back a `Lego Brick` or `full HTML` Page depending on if the request is a Lego Request or plain old HTTP request.
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
### Basket Loaded
|
|
141
|
-
<hr>
|
|
142
|
-
|
|
143
|
-
This strategy depends on you calling into the `Lego Basket` to get the page where the Naive Brick returned from the server should sit.
|
|
144
|
-
|
|
145
|
-
```html
|
|
146
|
-
|
|
147
|
-
<Card></Card>
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
<script src="/path.to.bundle.js"></script>
|
|
151
|
-
<script>
|
|
152
|
-
let blocks = Basket.get("/approute/:ids/supported");
|
|
153
|
-
blocks.insert("#insertionPoint")
|
|
154
|
-
</script>
|
|
155
|
-
```
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
# KEEP
|
|
160
|
-
The keep is where state and objects are stored for reuse i.e. a User class or object that should be shared across multiple bricks and blocks. Like all other parts of Lego the API is pretty straightforward.
|
|
161
|
-
|
|
162
|
-
```html
|
|
163
|
-
|
|
164
|
-
<html>
|
|
165
|
-
<body>
|
|
166
|
-
</body>
|
|
167
|
-
|
|
168
|
-
<script src="unpkg.com/lego/1.0"></script>
|
|
169
|
-
<script>
|
|
170
|
-
let keep = lego.use("keep");
|
|
171
|
-
|
|
172
|
-
class User = { /* custom methods and properties etc */ }
|
|
173
|
-
|
|
174
|
-
keep.set("User", User);
|
|
175
|
-
</script>
|
|
176
|
-
|
|
177
|
-
```
|
package/dist/dom/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";
|
package/dist/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";
|
package/dist/utils/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";
|
package/dist/utils/traverser.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";
|
package/dist/veyors/basket.js
DELETED
package/dist/veyors/brick.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";
|
package/dist/veyors/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";
|
package/dist/veyors/router.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
File without changes
|
package/example/blocks/card.lego
DELETED
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
<div id="containerDivOrSomething">
|
|
4
|
-
<div class="card">
|
|
5
|
-
<input name="" onsubmit="doSomething" onchange="doAnotherThing"/>
|
|
6
|
-
|
|
7
|
-
<a href="/banner" id="escapeMe">Escape this link</a>
|
|
8
|
-
|
|
9
|
-
<!-- You can mix and match JS and server rendered code-->
|
|
10
|
-
<p onload="username" >{{username}}</p>
|
|
11
|
-
</div>
|
|
12
|
-
</div>
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
<script>
|
|
16
|
-
const doSomething = function(){};
|
|
17
|
-
const doAnotherThing = function(evt){evt.target.value};
|
|
18
|
-
|
|
19
|
-
Basket.register("containerDivOrSomething").as("SomeFormWizard");
|
|
20
|
-
|
|
21
|
-
const username = Interface.set((element) => {
|
|
22
|
-
element.innerHTML = "some value";
|
|
23
|
-
});
|
|
24
|
-
|
|
25
|
-
const lastName = async (evt) => {
|
|
26
|
-
evt.target.innerHTML = await fetchData()['last_name'];
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
Router.escape("escapeMe");
|
|
30
|
-
Interface.strip("containerDivOrSomething"); //if you don't want the container div to show up in the rendered output
|
|
31
|
-
|
|
32
|
-
let basket = lego.Basket.get('');
|
|
33
|
-
let router = lego.Router.goto('/');
|
|
34
|
-
|
|
35
|
-
let interfaces = lego.Interface.update();
|
|
36
|
-
let connection = lego.Connection.post();
|
|
37
|
-
let keep = lego.Keep.store();
|
|
38
|
-
|
|
39
|
-
container.replace()
|
|
40
|
-
</script>
|
package/example/blocks/form.lego
DELETED
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
<form method="/lego">
|
|
4
|
-
<div class="control">
|
|
5
|
-
<input name="someInputName" onchange="updateObject"></div>
|
|
6
|
-
</div>
|
|
7
|
-
</form>
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
<script src="unpkg.com/lego/1.0"></script>
|
|
11
|
-
<script>
|
|
12
|
-
const keep = lego.use("keep");
|
|
13
|
-
const basket = lego.use("basket");
|
|
14
|
-
|
|
15
|
-
//putting basket.brick in a block transforms it into a brick i.e. it is no longer naive/fluid and knows where it is expected to render
|
|
16
|
-
//so it is no longer fluid/naive but concrete/inflexible. It is advisable to separate bricks into different pages and load
|
|
17
|
-
//blocks into them but Lego will not get in your way if you
|
|
18
|
-
//prefer to limit blocks with the brick() call.
|
|
19
|
-
//
|
|
20
|
-
//i.e. a brick that loads this block would have been better and can be created by moving this call to a separate file
|
|
21
|
-
basket.brick("/", this);
|
|
22
|
-
|
|
23
|
-
// --> basket will look at /localStorage to get link to lego and load UI otherwise it will clear the screen and show Lego Error...
|
|
24
|
-
|
|
25
|
-
let user = keep.get("User");
|
|
26
|
-
// can also be scoped -> let enterpriseUser = keep.get("User.Type2");
|
|
27
|
-
|
|
28
|
-
let updateObject = (evt) => {
|
|
29
|
-
user.firstName(evt.target.value);
|
|
30
|
-
}
|
|
31
|
-
</script>
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
<html lang="en">
|
|
2
|
-
<head>
|
|
3
|
-
<meta charset="UTF-8">
|
|
4
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
5
|
-
<title>Lego Example</title>
|
|
6
|
-
|
|
7
|
-
<style>
|
|
8
|
-
p {
|
|
9
|
-
color: red;
|
|
10
|
-
}
|
|
11
|
-
</style>
|
|
12
|
-
</head>
|
|
13
|
-
<body>
|
|
14
|
-
<!-- This is a lego brick -->
|
|
15
|
-
<SomeFormWizard></SomeFormWizard>
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
<AnotherWizard>
|
|
19
|
-
<!-- whatever is nested inline in a brick will be removed and appended as the last child of the loaded brick-->
|
|
20
|
-
</AnotherWizard>
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
<script src="unpkg.com/lego/1.0"></script>
|
|
29
|
-
|
|
30
|
-
<!-- After loading Lego you can either link to where your basket is defined i.e. external js bundle -->
|
|
31
|
-
<script src="application.bundle.js"></script>
|
|
32
|
-
|
|
33
|
-
<!-- Or declare your lego bricks Inline -->
|
|
34
|
-
<script>
|
|
35
|
-
let basket = Lego.use("basket"); //case insensitive so .use("BaSkEt") works also
|
|
36
|
-
let router = Lego.use("router");
|
|
37
|
-
|
|
38
|
-
let AnotherWizard = router.get("./wizard.html");
|
|
39
|
-
|
|
40
|
-
let ProtectedBrick = router.get("./wizard.html", () => {
|
|
41
|
-
//This can be a global authentication function call to auth0 etc...
|
|
42
|
-
return router.get("./unathenticated.html");
|
|
43
|
-
})
|
|
44
|
-
|
|
45
|
-
//Explicit registration
|
|
46
|
-
Basket.register(AnotherWizard);
|
|
47
|
-
Basket.register(Router.get("./snippet.html")).as("SomeFormWizard");
|
|
48
|
-
</script>
|
|
49
|
-
</body>
|
|
50
|
-
</html>
|
package/src/dom/index.ts
DELETED
|
File without changes
|
package/src/index.ts
DELETED
|
File without changes
|
package/src/utils/index.ts
DELETED
|
File without changes
|
package/src/utils/traverser.ts
DELETED
|
File without changes
|
package/src/veyors/basket.ts
DELETED
package/src/veyors/brick.ts
DELETED
|
File without changes
|
package/src/veyors/index.ts
DELETED
|
File without changes
|
package/src/veyors/router.ts
DELETED
|
File without changes
|
package/tsconfig.json
DELETED
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"compilerOptions": {
|
|
3
|
-
/* Visit https://aka.ms/tsconfig.json to read more about this file */
|
|
4
|
-
|
|
5
|
-
/* Basic Options */
|
|
6
|
-
// "incremental": true, /* Enable incremental compilation */
|
|
7
|
-
"target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
|
|
8
|
-
"module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
|
|
9
|
-
// "lib": [], /* Specify library files to be included in the compilation. */
|
|
10
|
-
// "allowJs": true, /* Allow javascript files to be compiled. */
|
|
11
|
-
// "checkJs": true, /* Report errors in .js files. */
|
|
12
|
-
// "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
|
|
13
|
-
// "declaration": true, /* Generates corresponding '.d.ts' file. */
|
|
14
|
-
// "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
|
|
15
|
-
// "sourceMap": true, /* Generates corresponding '.map' file. */
|
|
16
|
-
// "outFile": "./", /* Concatenate and emit output to single file. */
|
|
17
|
-
"outDir": "./dist", /* Redirect output structure to the directory. */
|
|
18
|
-
// "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
|
|
19
|
-
// "composite": true, /* Enable project compilation */
|
|
20
|
-
// "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */
|
|
21
|
-
// "removeComments": true, /* Do not emit comments to output. */
|
|
22
|
-
// "noEmit": true, /* Do not emit outputs. */
|
|
23
|
-
// "importHelpers": true, /* Import emit helpers from 'tslib'. */
|
|
24
|
-
// "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
|
|
25
|
-
// "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
|
|
26
|
-
|
|
27
|
-
/* Strict Type-Checking Options */
|
|
28
|
-
"strict": true, /* Enable all strict type-checking options. */
|
|
29
|
-
// "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
|
|
30
|
-
// "strictNullChecks": true, /* Enable strict null checks. */
|
|
31
|
-
// "strictFunctionTypes": true, /* Enable strict checking of function types. */
|
|
32
|
-
// "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
|
|
33
|
-
// "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
|
|
34
|
-
// "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
|
|
35
|
-
// "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
|
|
36
|
-
|
|
37
|
-
/* Additional Checks */
|
|
38
|
-
// "noUnusedLocals": true, /* Report errors on unused locals. */
|
|
39
|
-
// "noUnusedParameters": true, /* Report errors on unused parameters. */
|
|
40
|
-
// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
|
|
41
|
-
// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
|
|
42
|
-
|
|
43
|
-
/* Module Resolution Options */
|
|
44
|
-
// "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
|
|
45
|
-
// "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
|
|
46
|
-
// "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
|
|
47
|
-
// "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
|
|
48
|
-
// "typeRoots": [], /* List of folders to include type definitions from. */
|
|
49
|
-
// "types": [], /* Type declaration files to be included in compilation. */
|
|
50
|
-
// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
|
|
51
|
-
"esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
|
|
52
|
-
// "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
|
|
53
|
-
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
|
|
54
|
-
|
|
55
|
-
/* Source Map Options */
|
|
56
|
-
// "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
|
|
57
|
-
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
|
|
58
|
-
// "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
|
|
59
|
-
// "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
|
|
60
|
-
|
|
61
|
-
/* Experimental Options */
|
|
62
|
-
// "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
|
|
63
|
-
// "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
|
|
64
|
-
|
|
65
|
-
/* Advanced Options */
|
|
66
|
-
"skipLibCheck": true, /* Skip type checking of declaration files. */
|
|
67
|
-
"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
|
|
68
|
-
}
|
|
69
|
-
}
|