als-layout 4.2.0 → 4.3.0

package/docs/4-view.md

@@ -0,0 +1,19 @@
+## View method
+
+**The view method is a pilot. Don't use in production.**
+
+```js
+Layout.viewsPath = '../../views'; // relative to layout path
+Layout.publicPath =  '../../public'; // public folder path for urls starts with "/" should be relative to root
+Layout.dev = false; // true by default
+
+const data = {};
+const includeBundle = false; // true by default
+layout.view('some/Test',data,includeBundle) // viewsPath/some/Test.js
+layout.view('some/test',data,includeBundle) // viewsPath/some/test/Index.js
+
+```
+
+* `includeBundle`
+  * in dev mode, will include bundle for rendering inside script tag in html
+  * in prod mode, will save context and bundle as files in publicPath/js folder and will add script[src] to html for those files.

package/index.js

@@ -1,6 +1,9 @@
 const { Document, SingleNode, Node } = require('als-document');
 const UglifyJS = require("uglify-js");
 const uglifycss = require('uglifycss');
+const { join, dirname } = require('path')
+const { writeFileSync, mkdirSync } = require('fs')
+const Render = require('als-render')
 
 const onloadScript = /*js*/`document.addEventListener('DOMContentLoaded', function() {
    const elements = document.querySelectorAll('[onload]');
@@ -13,16 +16,20 @@ const onloadScript = /*js*/`document.addEventListener('DOMContentLoaded', functi
 });`;
 
 class Layout extends Document {
-   get rawHtml() { return this.innerHTML }
-   get clone() { return new Layout(new Document(this), this.URL, this.minified) }
-   lang(lang) { this.html.setAttribute('lang', lang); return this }
-
+   static bundles = {};
+   static viewsPath = '../../views';
+   static publicPath =  '../../public';
+   static dev = true;
    constructor(html, host, minified = false) {
       super(html, host);
       this.minified = minified
       this.root = this.html
    }
 
+   get rawHtml() { return this.innerHTML }
+   get clone() { return new Layout(new Document(this), this.URL, this.minified) }
+   lang(lang) { this.html.setAttribute('lang', lang); return this }
+
    onload() {
       if (this.onloadAdded) return
       this.script({}, onloadScript);
@@ -143,6 +150,33 @@ class Layout extends Document {
       this.head.insert(2, linkElement)
       return this
    }
+
+   view(path, data = {}, includeBundle=true) {
+      const parts = path.split('/')
+      if(parts[parts.length-1][0].toUpperCase() !== parts[parts.length-1][0]) parts.push('Index.js')
+      const relativePath = join(Layout.viewsPath, ...parts)
+      const { bundle, bundleFn, callBundle, rawHtml, context } = Render.render(relativePath, data, !Layout.dev)
+      if (includeBundle) {
+         if (Layout.dev) this.script({}, bundle, false)
+         else {
+            this.write('context', context, true)
+            this.write(path, bundleFn, false)
+            this.script({}, callBundle, false)
+         }
+      }
+      const element = /*html*/`<content></content>`
+      this.body.insertAdjacentHTML('afterbegin', element)
+      return this.rawHtml.replace(element, rawHtml)
+   }
+
+   write(path, content, head) {
+      if (Layout.bundles[path]) return
+      const filePath = join(Layout.publicPath, 'js', path + '.js')
+      mkdirSync(dirname(filePath), { recursive: true })
+      writeFileSync(filePath, content)
+      Layout.bundles[path] = path
+      this.script({ src: `/js/${path}.js` }, '', head)
+   }
 }
 
 module.exports = Layout

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "als-layout",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "main": "index.js",
   "scripts": {
     "test": "node --test --experimental-test-coverage",
@@ -12,7 +12,11 @@
   "description": "Html layout constructor",
   "dependencies": {
     "als-document": "^1.4.0",
+    "als-render": "^0.9.3",
     "uglify-js": "^3.19.2",
     "uglifycss": "^0.0.29"
+  },
+  "devDependencies": {
+    "fs-extra": "^11.2.0"
   }
 }

package/readme.md

@@ -152,3 +152,23 @@ In this example:
 - We dynamically add a versioned link to a stylesheet in the `homePage`, demonstrating control over caching and resource management.
 
 This advanced example illustrates how `als-layout` can be used to handle complex scenarios and requirements in web development, enhancing the flexibility and power at your disposal.
+
+## View method
+
+**The view method is a pilot. Don't use in production.**
+
+```js
+Layout.viewsPath = '../../views'; // relative to layout path
+Layout.publicPath =  '../../public'; // public folder path for urls starts with "/" should be relative to root
+Layout.dev = false; // true by default
+
+const data = {};
+const includeBundle = false; // true by default
+layout.view('some/Test',data,includeBundle) // viewsPath/some/Test.js
+layout.view('some/test',data,includeBundle) // viewsPath/some/test/Index.js
+
+```
+
+* `includeBundle`
+  * in dev mode, will include bundle for rendering inside script tag in html
+  * in prod mode, will save context and bundle as files in publicPath/js folder and will add script[src] to html for those files.

package/tests/view.test.js

@@ -0,0 +1,72 @@
+const assert = require('assert');
+const { describe, it, beforeEach, before, afterEach } = require('node:test')
+const Layout = require('../index');
+const { readdirSync, removeSync, existsSync, rmdirSync } = require('fs-extra')
+const { join } = require('path')
+Layout.viewsPath = 'views';
+Layout.publicPath = join(__dirname,'public')
+
+describe('Dev mode', () => {
+   let layout
+   before(() => {
+      Layout.dev = true;
+   })
+   beforeEach(() => {
+      layout = new Layout()
+   })
+
+   it('view path without bundle', () => {
+      const html = layout.view('App', { test: 'test' })
+      assert(html.includes(/*html*/`<div component="App">Hello test</div>`))
+      assert(!html.includes(/*html*/`<content></content>`))
+   })
+
+   it('view Index path without bundle', () => {
+      const html = layout.view('app', { test: 'test' })
+      assert(html.includes(/*html*/`<div component="Index">Hello test</div>`))
+      assert(!html.includes(/*html*/`<content></content>`))
+   })
+
+   it('view path with bundle', () => {
+      const html = layout.view('App', { test: 'test' }, true)
+      assert(html.includes('const Context'))
+      assert(html.includes('renderedBundle'))
+   })
+
+})
+
+describe('Prod mode', () => {
+   let layout
+   const publicPath = join(Layout.publicPath,'js')
+   before(() => {
+      Layout.dev = false;
+   })
+   beforeEach(() => {
+      layout = new Layout()
+   })
+   
+   afterEach(() => {
+      if(!existsSync(publicPath)) return
+      const files = readdirSync(publicPath)
+      files.forEach(file => removeSync(join(publicPath,file)))
+      if(existsSync(publicPath)) rmdirSync(publicPath)
+   })
+
+   it('view path without bundle', () => {
+      const html = layout.view('App', { test: 'test' })
+      assert(html.includes(/*html*/`<div component="App">Hello test</div>`))
+      assert(!html.includes(/*html*/`<content></content>`))
+      assert(existsSync(publicPath) === false)
+   })
+
+   it('view path with bundle', () => {
+      const html = layout.view('App', { test: 'test' }, true)
+      const files = readdirSync(publicPath)
+      assert.deepStrictEqual(files,[ 'App.js', 'context.js' ])
+      assert(html.includes('/js/App.js'))
+      assert(html.includes('renderedBundle'))
+      // <script src="/js/App.js"></script><script>renderedBundle({"test":"test"})</script>
+   })
+
+})
+

package/tests/views/App.js

@@ -0,0 +1,5 @@
+function App(props={}) {
+   return (<div>Hello {props.test}</div>)
+}
+
+module.exports = App

package/tests/views/app/Index.js

@@ -0,0 +1,5 @@
+function Index(props={}) {
+   return (<div>Hello {props.test}</div>)
+}
+
+module.exports = Index