(https://StijnDeWitt.com)",
50 | "license": "CC-BY-4.0",
51 | "bugs": {
52 | "url": "https://github.com/download/preact-layout/issues"
53 | },
54 | "homepage": "http://download.github.io/preact-layout",
55 | "dependencies": {
56 | "preact": "^6.3.0",
57 | "preact-render-to-string": "^3.2.1"
58 | },
59 | "devDependencies": {
60 | "babel-cli": "^6.16.0",
61 | "babel-core": "^6.17.0",
62 | "babel-jest": "^16.0.0",
63 | "babel-loader": "^6.2.0",
64 | "babel-plugin-check-es2015-constants": "^6.3.13",
65 | "babel-plugin-transform-es2015-arrow-functions": "^6.3.13",
66 | "babel-plugin-transform-es2015-block-scoped-functions": "^6.3.13",
67 | "babel-plugin-transform-es2015-block-scoping": "^6.3.13",
68 | "babel-plugin-transform-es2015-classes": "^6.3.13",
69 | "babel-plugin-transform-es2015-computed-properties": "^6.3.13",
70 | "babel-plugin-transform-es2015-destructuring": "^6.16.0",
71 | "babel-plugin-transform-es2015-for-of": "^6.3.13",
72 | "babel-plugin-transform-es2015-function-name": "^6.3.13",
73 | "babel-plugin-transform-es2015-literals": "^6.3.13",
74 | "babel-plugin-transform-es2015-modules-commonjs": "^6.16.0",
75 | "babel-plugin-transform-es2015-object-super": "^6.3.13",
76 | "babel-plugin-transform-es2015-parameters": "^6.17.0",
77 | "babel-plugin-transform-es2015-shorthand-properties": "^6.3.13",
78 | "babel-plugin-transform-es2015-spread": "^6.3.13",
79 | "babel-plugin-transform-es2015-sticky-regex": "^6.3.13",
80 | "babel-plugin-transform-es2015-template-literals": "^6.3.13",
81 | "babel-plugin-transform-es2015-unicode-regex": "^6.3.13",
82 | "babel-plugin-transform-es3-member-expression-literals": "^6.5.0",
83 | "babel-plugin-transform-es3-property-literals": "^6.5.0",
84 | "babel-plugin-transform-object-rest-spread": "^6.16.0",
85 | "babel-plugin-transform-react-jsx": "^6.8.0",
86 | "babel-register": "^6.16.3",
87 | "check-es3-syntax-cli": "^0.1.1",
88 | "cross-env": "^3.1.1",
89 | "gitbook-cli": "^2.3.0",
90 | "glob": "^7.1.1",
91 | "jest": "^17.0.0",
92 | "loose-envify": "^1.1.0",
93 | "preact-render-to-string": "^3.1.1",
94 | "rimraf": "^2.3.4",
95 | "touch": "^1.0.0",
96 | "uevents": "^1.0.0",
97 | "webpack": "^1.9.6"
98 | },
99 | "npmName": "preact-layout",
100 | "npmFileMap": [
101 | {
102 | "basePath": "/dist/",
103 | "files": [
104 | "*.js"
105 | ]
106 | }
107 | ],
108 | "browserify": {
109 | "transform": [
110 | "loose-envify"
111 | ]
112 | },
113 | "jest": {
114 | "testRegex": "(/test/.*\\.spec.jsx)$",
115 | "moduleFileExtensions": [
116 | "js",
117 | "jsx"
118 | ]
119 | }
120 | }
121 |
--------------------------------------------------------------------------------
/preact-layout.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Download/preact-layout/e4bd240373bcffc7108fc73156f1213629216a0d/preact-layout.png
--------------------------------------------------------------------------------
/src/index.jsx:
--------------------------------------------------------------------------------
1 | import { h, Component } from 'preact'
2 |
3 | function Layout({className, recurse, children, ...props}, context) {
4 | const { main, sections } = getSections(children)
5 | processNode(main, sections, { ...context }, recurse)
6 | return children && children.length === 1 ? children[0] : (
7 | {children}
8 | )
9 | }
10 |
11 | function Section({type, children, ...props}, context) {return (
12 | children && (children.length === 1) ? children[0] : (
13 | {children}
14 | )
15 | )}
16 |
17 | function getSections(n, result) {
18 | if (!result) result = {sections:[]}
19 | if (n.nodeName === Section) {
20 | if (n.attributes && n.attributes.type) result.sections.push(n)
21 | else result.main = n
22 | }
23 | const children = Array.isArray(n) ? n : n.children
24 | children && children.forEach(c => {
25 | getSections(c, result)
26 | })
27 | return result
28 | }
29 |
30 | function processNode(node, sections, context, recurse, collectOnly, results) {
31 | const leftovers = [], postProcess = !results
32 | context = context || {}
33 | if (recurse === undefined) recurse = 9
34 | results = results || {}
35 | sections.forEach(s => results[s.attributes.type] = results[s.attributes.type] || s.children || [])
36 | node && node.children && node.children.forEach(n => {
37 | if (isContribution(n, sections)) {
38 | if (! results[n.nodeName]) results[n.nodeName] = []
39 | if (n.attributes && n.attributes.append) results[n.nodeName].push.apply(results[n.nodeName], n.children || [])
40 | else if (n.attributes && n.attributes.prepend) results[n.nodeName].unshift.apply(results[n.nodeName], n.children || [])
41 | else results[n.nodeName] = n.children || []
42 | return // continue
43 | }
44 | leftovers.push(n)
45 | if (typeof n.nodeName == 'function' && recurse) {
46 | let props = { ...n.nodeName.defaultProps, ...n.attributes, children:n.children }
47 | if (n.nodeName.prototype && typeof n.nodeName.prototype.render == 'function') {
48 | let rn, c = new n.nodeName(props, context);
49 | c.props = props;
50 | c.context = context;
51 | if (c.componentWillMount) c.componentWillMount();
52 | n = c.render(c.props, c.state, c.context);
53 | if (c.getChildContext) context = { ...context, ...c.getChildContext() }
54 | }
55 | else n = n.nodeName(props, context)
56 | recurse--
57 | }
58 | processNode(n, sections, context, recurse, collectOnly, results)
59 | })
60 | if (! collectOnly) {
61 | if (node.children) node.children = leftovers
62 | if (postProcess) sections.forEach(s => s.children = results[s.attributes.type])
63 | }
64 | return results
65 | }
66 |
67 | function isContribution(n, sections) {
68 | return sections.filter(s => n.nodeName === s.attributes.type).length > 0
69 | }
70 |
71 |
72 | export {
73 | Layout,
74 | Section,
75 |
76 | getSections,
77 | isContribution,
78 | processNode
79 | }
80 |
--------------------------------------------------------------------------------
/test/Layout.spec.jsx:
--------------------------------------------------------------------------------
1 | import { h, Component } from 'preact'
2 | import render from 'preact-render-to-string'
3 | import EventEmitter from 'uevents'
4 |
5 | import { Layout, Section, getSections, isContribution, processNode } from '../src'
6 |
7 | describe('preact-layout', () => {
8 | it('exports `Layout`, `Section`, `getSections`, `isContribution` and `processNode`', () => {
9 | expect(typeof Layout).toBe('function')
10 | expect(typeof Section).toBe('function')
11 | expect(typeof getSections).toBe('function')
12 | expect(typeof isContribution).toBe('function')
13 | expect(typeof processNode).toBe('function')
14 | })
15 |
16 | describe('Layout & Section', () => {
17 | it('allows children from the main section to contribute components to other sections of the layout', () => {
18 | function Header(){}
19 | function Footer(){}
20 |
21 | function MyPage(){
22 | return (
23 |
24 |
25 |
main article
26 |
27 |
34 |
37 |
38 |
41 |
42 |
45 |
46 |
47 | )
48 |
49 | // work around preact-render-to-string generating comment
50 | // nodes for empty (null/undefined) vdom elements. It's
51 | // a bug according to Jason
52 | result = result.replace(//g, '')
53 |
54 | expect(result).toBe('')
55 | })
56 |
57 | it('allows for the layout to be componentized separately', () => {
58 | function Header(){}
59 | function Footer(){}
60 |
61 | function MyLayout({children, ...props}) {
62 | return (
63 |
64 |
65 |
68 |
69 |
72 |
73 |
76 |
77 |
78 | )
79 | }
80 |
81 | const result = render(
82 |
83 |
84 | main article
85 |
86 |
87 | )
88 |
89 | expect(result).toBe('my page
main articlegoodbye
99 |
102 |
103 |
104 |
105 |
108 |
109 |
110 | )}
111 |
112 | function MyPage(){
113 | return (
114 |
115 |
116 |
main article
117 |
118 |
158 |
161 |
162 |
165 |
166 |
169 |
170 |
171 | )
172 | }
173 |
174 | function MyPage(){
175 | return (
176 |
177 |
178 |
main article
179 |
180 |
{children}
186 | }
187 |
188 | // 2 levels
189 | // nested children above tested 1 level deep, this tests 2 levels deep
190 | let result = render(
191 |
192 |
193 |
194 |
195 |
196 | )
197 |
198 | expect(result.indexOf('my page')).not.toBe(-1)
199 |
200 | // 3 levels
201 | result = render(
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 | )
210 |
211 | expect(result.indexOf('my page')).not.toBe(-1)
212 |
213 | // 4 levels
214 | result = render(
215 |
216 |
217 |
218 |
219 |
220 |
221 |
222 |
223 |
224 | )
225 |
226 | expect(result.indexOf('my page')).not.toBe(-1)
227 |
228 | // 5 levels
229 | result = render(
230 |
231 |
232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |
240 |
241 | )
242 |
243 | expect(result.indexOf('my page')).not.toBe(-1)
244 |
245 | // 6 levels
246 | result = render(
247 |
248 |
249 |
250 |
251 |
252 |
253 |
254 |
255 |
256 |
257 |
258 |
259 |
260 | )
261 |
262 | expect(result.indexOf('my page')).not.toBe(-1)
263 |
264 | // 7 levels
265 | result = render(
266 |
267 |
268 |
269 |
270 |
271 |
272 |
273 |
274 |
275 |
276 |
277 |
278 |
279 |
280 |
281 | )
282 |
283 | expect(result.indexOf('my page')).not.toBe(-1)
284 |
285 | // 8 levels
286 | result = render(
287 |
288 |
289 |
290 |
291 |
292 |
293 |
294 |
295 |
296 |
297 |
298 |
299 |
300 |
301 |
302 |
303 |
304 | )
305 |
306 | expect(result.indexOf('my page')).not.toBe(-1)
307 |
308 | // 9 levels
309 | result = render(
310 |
311 |
312 |
313 |
314 |
315 |
316 |
317 |
318 |
319 |
320 |
321 |
322 |
323 |
324 |
325 |
326 |
327 |
328 |
329 | )
330 |
331 | expect(result.indexOf('my page')).not.toBe(-1)
332 |
333 | // 10 levels
334 | result = render(
335 |
336 |
337 |
338 |
339 |
340 |
341 |
342 |
343 |
344 |
345 |
346 |
347 |
348 |
349 |
350 |
351 |
352 |
353 |
354 |
355 |
356 | )
357 |
358 | expect(result.indexOf('my page')).toBe(-1)
359 | })
360 |
361 |
362 | it('allows the recursion depth to be set on the layout', () => {
363 | function Header(){}
364 | function Footer(){}
365 |
366 | function MyLayout({children, ...props}) {
367 | return (
368 |
369 |
370 |
373 |
374 |
377 |
378 |
381 |
382 |
383 | )
384 | }
385 |
386 | function MyPage(){
387 | return (
388 |
389 |
390 |
main article
391 |
392 |
{children}
398 | }
399 |
400 | // 2 levels
401 | // nested children above tested 1 level deep, this tests 2 levels deep
402 | let result = render(
403 |
404 |
405 |
406 |
407 |
408 | )
409 |
410 | expect(result.indexOf('my page')).not.toBe(-1)
411 |
412 | // 3 levels
413 | result = render(
414 |
415 |
416 |
417 |
418 |
419 |
420 |
421 | )
422 |
423 | expect(result.indexOf('my page')).toBe(-1)
424 | })
425 |
426 | it('allows contribution functions to be used across multiple layouts', () => {
427 | function Header(){}
428 | function Footer(){}
429 |
430 | function MyLayout({children, ...props}) {return (
431 |
432 |
433 |
436 |
437 |
440 |
441 |
442 | )}
443 |
444 | function ReversedLayout({children, ...props}) {return (
445 |
446 |
447 |
450 |
451 |
454 |
455 |
456 | )}
457 |
458 | function MyPage(){return (
459 |
460 |
461 |
main article
462 |
463 |
529 |
532 |
533 |
536 |
537 |
538 | )}
539 | }
540 |
541 | class ReversedLayout extends Component {
542 | render({children, ...props}) {return (
543 |
544 |
545 |
548 |
549 |
552 |
553 |
554 | )}
555 | }
556 |
557 | class MyPage extends Component {
558 | render(){return (
559 |
560 |
561 |
main article
562 |
563 |
633 |
636 |
637 |
640 |
641 |
642 | )
643 | const result = getSections(markup)
644 | const expected = {
645 | sections:[
646 | ,
647 |
648 | ],
649 | main:
650 | }
651 | expect(result).toEqual(expected)
652 | })
653 |
654 | it('does not render any components found (shallow search)', () => {
655 | function Header(){}
656 | function Footer(){}
657 |
658 | function MyLayout({children}) {return (
659 |
660 |
661 |
664 |
665 |
668 |
669 |
670 | )}
671 | const markup =
672 | const result = getSections(markup)
673 | const expected = {
674 | sections:[],
675 | main: undefined
676 | }
677 | expect(result).toEqual(expected)
678 | })
679 | })
680 |
681 |
682 | describe('isContribution(vnode, sections)', () => {
683 | it('accepts a single vnode and an array of sections', () => {
684 | function Header(){}
685 | const markup =
686 | const { sections } = getSections(markup)
687 | const result = isContribution(, sections)
688 | const expected = false
689 | expect(result).toBe(expected)
690 | })
691 |
692 | it('returns true if the vnode is a contribution for any of the given sections', () => {
693 | function Header(){}
694 | function Footer(){}
695 | const children = undefined
696 | const markup = (
697 |
698 |
699 |
702 |
703 |
706 |
707 |
708 | )
709 | const { sections } = getSections(markup)
710 | const result = isContribution(, sections)
711 | const expected = true
712 | expect(result).toBe(expected)
713 | })
714 | })
715 | })
716 |
717 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var webpack = require('webpack')
4 |
5 | var env = process.env.NODE_ENV
6 | var config = {
7 | resolve: {
8 | // IMPORTANT: Setting this option will override the default, meaning that webpack
9 | // will no longer try to resolve modules using the default extensions. If you want
10 | // modules that were required with their extension (e.g. require('./somefile.ext'))
11 | // to be properly resolved, you must include an empty string in your array.
12 | // Similarly, if you want modules that were required without extensions (e.g.
13 | // require('underscore')) to be resolved to files with “.js” extensions, you must
14 | // include ".js" in your array.
15 | // Default: ["", ".webpack.js", ".web.js", ".js"]
16 | // https://webpack.github.io/docs/configuration.html#resolve-extensions
17 | extensions: ['', '.webpack.js', '.web.js', '.js', '.json', '.jsx'],
18 | },
19 | module: {
20 | loaders: [
21 | { test: /\.jsx$/, loaders: ['babel-loader'], exclude: /node_modules/ }
22 | ]
23 | },
24 | externals: {
25 | preact: 'preact',
26 | },
27 | output: {
28 | libraryTarget: 'umd'
29 | },
30 | plugins: [
31 | new webpack.optimize.OccurrenceOrderPlugin(),
32 | new webpack.DefinePlugin({
33 | 'process.env.NODE_ENV': JSON.stringify(env)
34 | })
35 | ]
36 | };
37 |
38 | if (env === 'production') {
39 | config.plugins.push(
40 | new webpack.optimize.UglifyJsPlugin({
41 | compressor: {
42 | pure_getters: true,
43 | unsafe: true,
44 | unsafe_comps: true,
45 | warnings: false
46 | }
47 | })
48 | )
49 | }
50 |
51 | module.exports = config
52 |
--------------------------------------------------------------------------------