arche 0.3.10 → 1.0.0

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.
Files changed (11) hide show
  1. package/.eslintrc.js +1 -4
  2. package/CONTRIBUTING.md +24 -0
  3. package/LICENSE +1 -1
  4. package/README.md +362 -74
  5. package/es.js +384 -163
  6. package/index.js +585 -228
  7. package/index.mjs +384 -163
  8. package/package.json +1 -1
  9. package/test.html +77 -17
  10. package/test.js +143 -10
  11. package/test-lib.html +0 -87
package/test.html CHANGED
@@ -5,24 +5,22 @@
5
5
  <title>test</title>
6
6
  <script src="https://unpkg.com/react@16.13.1/umd/react.production.min.js" crossorigin></script>
7
7
  <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.production.min.js" crossorigin></script>
8
+ <script src="https://unpkg.com/styled-components@6.1.19/dist/styled-components.min.js"></script>
8
9
  <script src="/index.js"></script>
9
10
  </head>
10
11
  <body>
11
- <div id="example"></div>
12
- <div id="user-card"></div>
13
- <div id="dom-example"></div>
14
- </body>
15
- <script>
12
+ <div id="react-counter"></div>
13
+
14
+ <script>
16
15
  const ReactElement = Arche(React)
17
- const { Div, H1, P, Button, Img } = ReactElement
18
16
  const { useState } = React
19
17
 
20
- const Example = ReactElement(() => {
18
+ const ReactCounter = ReactElement(() => {
21
19
  const [count, setCount] = useState(0)
22
- return Div([
23
- P('Success! - React'),
24
- P(`You clicked ${count} times`),
25
- Button({
20
+ return ReactElement.Div([
21
+ ReactElement.P('Success! - React Counter'),
22
+ ReactElement.P(`You clicked ${count} times`),
23
+ ReactElement.Button({
26
24
  onClick() {
27
25
  setCount(count + 1)
28
26
  },
@@ -30,20 +28,34 @@ const Example = ReactElement(() => {
30
28
  ])
31
29
  })
32
30
 
33
- ReactDOM.render(Example(), document.getElementById('example'))
31
+ ReactDOM.render(ReactCounter(), document.getElementById('react-counter'))
32
+ </script>
33
+
34
+ <div id="user-card"></div>
34
35
 
36
+ <script>
35
37
  const UserCard = ReactElement(({
36
38
  firstName, lastName, age,
37
- }) => Div({ style: { border: '1px solid lightgrey' } }, [
38
- H1(`${firstName} ${lastName}`),
39
- Img({ src: 'https://via.placeholder.com/150x150', alt: 'placeholder' }),
40
- P({ style: { color: 'lightgrey' } }, `age: ${age}`),
39
+ }) => ReactElement.Div({ style: { border: '1px solid lightgrey' } }, [
40
+ ReactElement.P('Success! - React User Card'),
41
+ ReactElement.H1(`${firstName} ${lastName}`),
42
+ ReactElement.Img({ src: 'https://placehold.co/300', alt: 'placeholder' }),
43
+ ReactElement.P({ style: { color: 'lightgrey' } }, `age: ${age}`),
41
44
  ]))
42
45
 
46
+ console.log(
47
+ UserCard({ firstName: 'George', lastName: 'Henry', age: 32 }),
48
+ )
49
+
43
50
  ReactDOM.render(
44
51
  UserCard({ firstName: 'George', lastName: 'Henry', age: 32 }),
45
- document.getElementById('user-card'))
52
+ document.getElementById('user-card')
53
+ )
54
+ </script>
55
+
56
+ <div id="dom-example"></div>
46
57
 
58
+ <script>
47
59
  const DOMElement = Arche(document)
48
60
 
49
61
  const domExample = DOMElement.Div([
@@ -56,6 +68,54 @@ const domExample = DOMElement.Div([
56
68
  ])
57
69
 
58
70
  document.getElementById('dom-example').appendChild(domExample)
71
+ </script>
72
+
73
+ <div id="styled-react-user-card"></div>
74
+
75
+ <script>
76
+ const StyledReactElement = Arche(React, { styled })
59
77
 
78
+ const StyledUserCard = StyledReactElement(({
79
+ firstName, lastName, age,
80
+ }) => StyledReactElement.Div({
81
+ css: `
82
+ border: 1px solid lightgrey;
83
+ `,
84
+ }, [
85
+ StyledReactElement.P('Success! - Styled React User Card'),
86
+ StyledReactElement.H1(`${firstName} ${lastName}`),
87
+ StyledReactElement.Img({ src: 'https://placehold.co/300', alt: 'placeholder' }),
88
+ StyledReactElement.P({
89
+ css: `
90
+ color: lightgrey;
91
+ `,
92
+ }, `age: ${age}`),
93
+ ]))
94
+
95
+ ReactDOM.render(
96
+ StyledUserCard({ firstName: 'George', lastName: 'Henry II', age: 32 }),
97
+ document.getElementById('styled-react-user-card')
98
+ )
99
+
100
+ console.log(styled)
101
+ </script>
102
+
103
+ <div id="my-container"></div>
104
+
105
+ <script>
106
+ const DocumentElement = Arche()
107
+
108
+ const myElement = DocumentElement.Div({ id: 'my-element' }, [
109
+ DocumentElement.P('Success! - Docs container example'),
110
+ DocumentElement.H1('I am a heading'),
111
+ DocumentElement.P('paragraph'),
112
+ DocumentElement.P('lorem ipsum'),
113
+ ])
114
+
115
+ document.getElementById('my-container').appendChild(myElement)
116
+ </script>
117
+
118
+ </body>
119
+ <script>
60
120
  </script>
61
121
  </html>
package/test.js CHANGED
@@ -12,10 +12,10 @@ describe('Arche', () => {
12
12
  new TypeError('creator not defined'),
13
13
  )
14
14
 
15
- globalThis.document = { createElement() {} }
15
+ const document = { createElement() {} }
16
16
 
17
- const E1 = Arche()
18
- assert.equal(E1.creator, globalThis.document)
17
+ const E1 = Arche(document)
18
+ assert.equal(E1.creator, document)
19
19
  })
20
20
 
21
21
  const mockEventListeners = new Map()
@@ -45,8 +45,15 @@ describe('Arche', () => {
45
45
  return { type: 'text', text }
46
46
  }
47
47
  }
48
- const rootElement = Arche(mockDocument)
49
- const { Div, H1, P, Span, Article, Button } = rootElement
48
+ const MockElement = Arche(mockDocument)
49
+ const { Div, H1, P, Span, Article, Button } = MockElement
50
+
51
+ it('create element directly', async () => {
52
+ const myButton = MockElement('button', { id: 'my-button' }, 'My Button')
53
+ assert.equal(myButton.type, 'button')
54
+ assert.deepEqual(myButton.children, [{ type: 'text', text: 'My Button' }])
55
+ assert.equal(myButton.id, 'my-button')
56
+ })
50
57
 
51
58
  it('tree structure', async () => {
52
59
  const listener = event => {
@@ -54,7 +61,7 @@ describe('Arche', () => {
54
61
  }
55
62
 
56
63
  const el = Div([
57
- H1('header'),
64
+ MockElement('h1', {}, 'header'),
58
65
  P({ style: { color: 'grey' } }, 'description'),
59
66
  Span({ id: 'hey', excluded: null }),
60
67
  Div({ id: 'nested' }, [
@@ -88,8 +95,8 @@ describe('Arche', () => {
88
95
  return [type, props || {}, children || []]
89
96
  },
90
97
  }
91
- const rootElement = Arche(mockReact)
92
- const { Div, H1, P, Span, Article } = rootElement
98
+ const MockReactElement = Arche(mockReact)
99
+ const { Div, H1, P, Span, Article } = MockReactElement
93
100
 
94
101
  it('tree structure', async () => {
95
102
  const el = Div([
@@ -126,11 +133,11 @@ describe('Arche', () => {
126
133
  article: get0,
127
134
  }
128
135
 
129
- const rootElement = Arche(mockReact, {
136
+ const MockReactElement = Arche(mockReact, {
130
137
  styled,
131
138
  styledMemoizationCap: 1,
132
139
  })
133
- const { Div, H1, P, Span, Article } = rootElement
140
+ const { Div, H1, P, Span, Article } = MockReactElement
134
141
 
135
142
  it('tree structure 1', () => {
136
143
  const el = Div([
@@ -166,4 +173,130 @@ describe('Arche', () => {
166
173
  '["div",{},[["h1",{},["header"]],["h3",{"style":{"color":"grey"}},["description"]],["b",{"id":"hey","excluded":null},[]],["article",{"id":"nested"},[["article",{},["yo"]]]],["span",{},[]]]]')
167
174
  })
168
175
  })
176
+
177
+ it('Typed elements', async () => {
178
+ const mockReact = {
179
+ createElement(type, props, ...children) {
180
+ return [type, props || {}, children || []]
181
+ },
182
+ }
183
+ const MockReactElement = Arche(mockReact)
184
+
185
+ assert.equal(typeof MockReactElement.A, 'function')
186
+ assert.equal(MockReactElement.A()[0],'a')
187
+ assert.equal(typeof MockReactElement.P, 'function')
188
+ assert.equal(MockReactElement.P()[0],'p')
189
+ assert.equal(typeof MockReactElement.B, 'function')
190
+ assert.equal(MockReactElement.B()[0],'b')
191
+ assert.equal(typeof MockReactElement.Q, 'function')
192
+ assert.equal(MockReactElement.Q()[0],'q')
193
+ assert.equal(typeof MockReactElement.I, 'function')
194
+ assert.equal(MockReactElement.I()[0],'i')
195
+ assert.equal(typeof MockReactElement.S, 'function')
196
+ assert.equal(MockReactElement.S()[0],'s')
197
+ assert.equal(typeof MockReactElement.U, 'function')
198
+ assert.equal(MockReactElement.U()[0],'u')
199
+ assert.equal(typeof MockReactElement.Ul, 'function')
200
+ assert.equal(MockReactElement.Ul()[0],'ul')
201
+ assert.equal(typeof MockReactElement.Ol, 'function')
202
+ assert.equal(MockReactElement.Ol()[0],'ol')
203
+ assert.equal(typeof MockReactElement.Li, 'function')
204
+ assert.equal(MockReactElement.Li()[0],'li')
205
+
206
+ assert.equal(typeof MockReactElement.H1, 'function')
207
+ assert.equal(MockReactElement.H1()[0],'h1')
208
+ assert.equal(typeof MockReactElement.H2, 'function')
209
+ assert.equal(MockReactElement.H2()[0],'h2')
210
+ assert.equal(typeof MockReactElement.H3, 'function')
211
+ assert.equal(MockReactElement.H3()[0],'h3')
212
+ assert.equal(typeof MockReactElement.H4, 'function')
213
+ assert.equal(MockReactElement.H4()[0],'h4')
214
+ assert.equal(typeof MockReactElement.H5, 'function')
215
+ assert.equal(MockReactElement.H5()[0],'h5')
216
+ assert.equal(typeof MockReactElement.H6, 'function')
217
+ assert.equal(MockReactElement.H6()[0],'h6')
218
+ assert.equal(typeof MockReactElement.Hr, 'function')
219
+ assert.equal(MockReactElement.Hr()[0],'hr')
220
+ assert.equal(typeof MockReactElement.Br, 'function')
221
+ assert.equal(MockReactElement.Br()[0],'br')
222
+
223
+ assert.equal(typeof MockReactElement.Script, 'function')
224
+ assert.equal(MockReactElement.Script()[0],'script')
225
+ assert.equal(typeof MockReactElement.Style, 'function')
226
+ assert.equal(MockReactElement.Style()[0],'style')
227
+
228
+ assert.equal(typeof MockReactElement.Html, 'function')
229
+ assert.equal(MockReactElement.Html()[0],'html')
230
+ assert.equal(typeof MockReactElement.Main, 'function')
231
+ assert.equal(MockReactElement.Main()[0],'main')
232
+ assert.equal(typeof MockReactElement.Body, 'function')
233
+ assert.equal(MockReactElement.Body()[0],'body')
234
+ assert.equal(typeof MockReactElement.Header, 'function')
235
+ assert.equal(MockReactElement.Header()[0],'header')
236
+ assert.equal(typeof MockReactElement.Nav, 'function')
237
+ assert.equal(MockReactElement.Nav()[0],'nav')
238
+ assert.equal(typeof MockReactElement.Section, 'function')
239
+ assert.equal(MockReactElement.Section()[0],'section')
240
+ assert.equal(typeof MockReactElement.Article, 'function')
241
+ assert.equal(MockReactElement.Article()[0],'article')
242
+ assert.equal(typeof MockReactElement.Footer, 'function')
243
+ assert.equal(MockReactElement.Footer()[0],'footer')
244
+ assert.equal(typeof MockReactElement.Span, 'function')
245
+ assert.equal(MockReactElement.Span()[0],'span')
246
+ assert.equal(typeof MockReactElement.Div, 'function')
247
+ assert.equal(MockReactElement.Div()[0],'div')
248
+ assert.equal(typeof MockReactElement.Img, 'function')
249
+ assert.equal(MockReactElement.Img()[0],'img')
250
+ assert.equal(typeof MockReactElement.Video, 'function')
251
+ assert.equal(MockReactElement.Video()[0],'video')
252
+ assert.equal(typeof MockReactElement.Picture, 'function')
253
+ assert.equal(MockReactElement.Picture()[0],'picture')
254
+ assert.equal(typeof MockReactElement.Source, 'function')
255
+ assert.equal(MockReactElement.Source()[0],'source')
256
+
257
+ assert.equal(typeof MockReactElement.Form, 'function')
258
+ assert.equal(MockReactElement.Form()[0],'form')
259
+ assert.equal(typeof MockReactElement.Fieldset, 'function')
260
+ assert.equal(MockReactElement.Fieldset()[0],'fieldset')
261
+ assert.equal(typeof MockReactElement.Input, 'function')
262
+ assert.equal(MockReactElement.Input()[0],'input')
263
+ assert.equal(typeof MockReactElement.Label, 'function')
264
+ assert.equal(MockReactElement.Label()[0],'label')
265
+ assert.equal(typeof MockReactElement.Textarea, 'function')
266
+ assert.equal(MockReactElement.Textarea()[0],'textarea')
267
+ assert.equal(typeof MockReactElement.Select, 'function')
268
+ assert.equal(MockReactElement.Select()[0],'select')
269
+ assert.equal(typeof MockReactElement.Option, 'function')
270
+ assert.equal(MockReactElement.Option()[0],'option')
271
+
272
+ assert.equal(typeof MockReactElement.Button, 'function')
273
+ assert.equal(MockReactElement.Button()[0],'button')
274
+ assert.equal(typeof MockReactElement.Iframe, 'function')
275
+ assert.equal(MockReactElement.Iframe()[0],'iframe')
276
+ assert.equal(typeof MockReactElement.Blockquote, 'function')
277
+ assert.equal(MockReactElement.Blockquote()[0],'blockquote')
278
+ assert.equal(typeof MockReactElement.Code, 'function')
279
+ assert.equal(MockReactElement.Code()[0],'code')
280
+ assert.equal(typeof MockReactElement.Pre, 'function')
281
+ assert.equal(MockReactElement.Pre()[0],'pre')
282
+
283
+ assert.equal(typeof MockReactElement.Polygon, 'function')
284
+ assert.equal(MockReactElement.Polygon()[0],'polygon')
285
+ assert.equal(typeof MockReactElement.Svg, 'function')
286
+ assert.equal(MockReactElement.Svg()[0],'svg')
287
+ assert.equal(typeof MockReactElement.Path, 'function')
288
+ assert.equal(MockReactElement.Path()[0],'path')
289
+ assert.equal(typeof MockReactElement.Rect, 'function')
290
+ assert.equal(MockReactElement.Rect()[0],'rect')
291
+ assert.equal(typeof MockReactElement.Mask, 'function')
292
+ assert.equal(MockReactElement.Mask()[0],'mask')
293
+
294
+ assert.equal(typeof MockReactElement.Dl, 'function')
295
+ assert.equal(MockReactElement.Dl()[0],'dl')
296
+ assert.equal(typeof MockReactElement.Dt, 'function')
297
+ assert.equal(MockReactElement.Dt()[0],'dt')
298
+ assert.equal(typeof MockReactElement.Dd, 'function')
299
+ assert.equal(MockReactElement.Dd()[0],'dd')
300
+ })
301
+
169
302
  })
package/test-lib.html DELETED
@@ -1,87 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>test</title>
6
- <script src="https://unpkg.com/react@16.13.1/umd/react.production.min.js" crossorigin></script>
7
- <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.production.min.js" crossorigin></script>
8
- <script src="/index.js"></script>
9
- </head>
10
- <body>
11
- <div id="example"></div>
12
- <div id="user-card"></div>
13
- <div id="dom-example">
14
- </div>
15
- </body>
16
- <script>
17
- function isElement(obj) {
18
- try {
19
- return obj instanceof HTMLElement;
20
- } catch (error) {
21
- return (typeof obj == 'object') &&
22
- (obj.nodeType == 1) && (typeof obj.style == 'object') &&
23
- (typeof obj.ownerDocument == 'object')
24
- }
25
- }
26
-
27
- const Lib = {
28
- createElement(type, props, ...children) {
29
- const el = document.createElement(type)
30
-
31
- for (const key in props) {
32
- if (key == 'class') {
33
- el.className = props[key]
34
- } else {
35
- el[key] = props[key]
36
- }
37
- }
38
-
39
- if (typeof children == 'string') {
40
- el.appendChild(document.createTextNode(children))
41
- } else if (Array.isArray(children)) {
42
- for (const child of children) {
43
- if (typeof child == 'string') {
44
- el.appendChild(document.createTextNode(child))
45
- } else if (isElement(child)) {
46
- el.appendChild(child)
47
- } else {
48
- console.error(child)
49
- const error = new Error(`invalid child ${children}`)
50
- error.child = child
51
- throw error
52
- }
53
- }
54
- } else if (isElement(children)) {
55
- el.appendChild(children)
56
- } else {
57
- console.error(children)
58
- const error = new Error(`invalid children ${children}`)
59
- error.children = children
60
- throw error
61
- }
62
-
63
- return el
64
- },
65
- }
66
-
67
- const LibElement = Arche(Lib)
68
-
69
- const Div = LibElement('div')
70
- const H1 = LibElement('h1')
71
- const P = LibElement('p')
72
- const Span = LibElement('span')
73
-
74
- const component1 = Div({
75
- id: 'component-1',
76
- class: 'a',
77
- }, [
78
- H1('Component 1'),
79
- P('test'),
80
- ])
81
-
82
- console.log('component1', component1)
83
-
84
- document.getElementById('dom-example').appendChild(component1)
85
-
86
- </script>
87
- </html>