als-layout 4.0.0 → 4.1.0

package/docs/0-change-log.md

@@ -1,5 +1,7 @@
 ## Change Log 
 
+* V4.1.0
+  * Render removed
 * V4.0.0
   * All code rebuilded and refactored
   * No als-simple-css for style

package/index.js

@@ -2,7 +2,6 @@ const { Document, SingleNode, Node } = require('als-document');
 const UglifyJS = require("uglify-js");
 const uglifycss = require('uglifycss');
 
-const render = require('als-render');
 const onloadScript = /*js*/`document.addEventListener('DOMContentLoaded', function() {
    const elements = document.querySelectorAll('[onload]');
    elements.forEach(element => {
@@ -148,18 +147,6 @@ class Layout extends Document {
       this.head.insert(2, linkElement)
       return this
    }
-
-   $(selector) {
-      const element = super.$(selector)
-      if (!element) return null
-      element.render = (path, data, includeBundle = true, contextName = 'context') => {
-         const { rawHtml, bundle } = render(path, data, contextName, false)
-         element.innerHTML = rawHtml
-         if (includeBundle) this.script({}, bundle, false)
-         return this
-      }
-      return element
-   }
 }
 
 module.exports = Layout

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "als-layout",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "main": "index.js",
   "scripts": {
     "test": "node --test --experimental-test-coverage",
@@ -12,7 +12,6 @@
   "description": "Html layout constructor",
   "dependencies": {
     "als-document": "^1.4.0",
-    "als-render": "^0.4.0",
     "uglify-js": "^3.19.2",
     "uglifycss": "^0.0.29"
   }

package/readme.md

@@ -20,6 +20,8 @@ const Layout = require('als-layout')
 
 ## Change Log 
 
+* V4.1.0
+  * Render removed
 * V4.0.0
   * All code rebuilded and refactored
   * No als-simple-css for style
@@ -144,53 +146,3 @@ In this example:
 
 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.
 
-
-## Rendering
-Since version 4.0 , `als-layout` using `als-render` for rendering. 
-Not for production use yet. 
-
-### Counter Example
-To demonstrate dynamic interaction, consider a counter that can be increased or decreased through user input:
-
-The App.js
-```jsx
-const Counter = require('./Counter')
-function App() {
-   context.count = 0
-   return (<div>
-      <Counter count={0} />
-   </div>)
-}
-module.exports = App
-```
-
-Counter.js
-```jsx
-function Counter({count}) {
-   return (<div>
-      <button onclick={() => this.update({count:count+1})}>Increase</button>
-      <span>{count}</span>
-      <button onclick={() => this.update({count:count-1})}>Decrease</button>
-   </div>)
-}
-
-module.exports = Counter
-```
-
-build.js
-```js
-const fs = require('fs')
-const Layout = require('als-layout')
-
-// Create and configure the layout
-const host = 'http://somehost.com'
-const minified = false
-const layout = new Layout('',host,minified).title('Counter')
-
-const data = {}, includeBundle = true;
-layout.$('body').render('./App',data,includeBundle)
-
-// Write the output to a file
-fs.writeFileSync('counter.html', layout.rawHtml, 'utf-8')
-```
-

package/docs/4-render.md

@@ -1,49 +0,0 @@
-## Rendering
-Since version 4.0 , `als-layout` using `als-render` for rendering. 
-Not for production use yet. 
-
-### Counter Example
-To demonstrate dynamic interaction, consider a counter that can be increased or decreased through user input:
-
-The App.js
-```jsx
-const Counter = require('./Counter')
-function App() {
-   context.count = 0
-   return (<div>
-      <Counter count={0} />
-   </div>)
-}
-module.exports = App
-```
-
-Counter.js
-```jsx
-function Counter({count}) {
-   return (<div>
-      <button onclick={() => this.update({count:count+1})}>Increase</button>
-      <span>{count}</span>
-      <button onclick={() => this.update({count:count-1})}>Decrease</button>
-   </div>)
-}
-
-module.exports = Counter
-```
-
-build.js
-```js
-const fs = require('fs')
-const Layout = require('als-layout')
-
-// Create and configure the layout
-const host = 'http://somehost.com'
-const minified = false
-const layout = new Layout('',host,minified).title('Counter')
-
-const data = {}, includeBundle = true;
-layout.$('body').render('./App',data,includeBundle)
-
-// Write the output to a file
-fs.writeFileSync('counter.html', layout.rawHtml, 'utf-8')
-```
-

package/tests/render/counter/App.js

@@ -1,8 +0,0 @@
-const Counter = require('./Counter')
-function App() {
-   context.count = 0
-   return (<div>
-      <Counter count={0} />
-   </div>)
-}
-module.exports = App

package/tests/render/counter/Counter.js

@@ -1,9 +0,0 @@
-function Counter({count}) {
-   return (<div>
-      <button onclick={() => this.update({count:count+1})}>Increase</button>
-      <span>{count}</span>
-      <button onclick={() => this.update({count:count-1})}>Decrease</button>
-   </div>)
-}
-
-module.exports = Counter

package/tests/render/counter/build.js

@@ -1,12 +0,0 @@
-const fs = require('fs')
-const Layout = require('../../../index')
-
-// Create and configure the layout
-const layout = new Layout('','',false).title('Counter')
-const time1 = performance.now()
-layout.$('body').render('./App')
-const time2 = performance.now()
-console.log(`${time2 - time1}ms`) // e.g., 1.0649ms
-
-// Write the output to a file
-fs.writeFileSync('counter.html', layout.rawHtml, 'utf-8')

package/tests/render/render/App.js

@@ -1,10 +0,0 @@
-const Some = require('./Some')
-
-function App() {
-   return (<div>
-      <div>Hello from App!</div>
-      <Some/>
-   </div>)
-}
-
-module.exports = App

package/tests/render/render/Some.js

@@ -1,8 +0,0 @@
-function Some() {
-   return (<div>
-      Hello From Some!
-
-   </div>)
-}
-
-module.exports = Some

package/tests/render.test.js

@@ -1,24 +0,0 @@
-const assert = require('assert');
-const { describe, it,beforeEach } = require('node:test')
-const Layout = require('../index')
-
-describe('Basic tests', () => {
-   let layout
-   beforeEach(() => layout = new Layout())
-   it('Should render without bundle',() => {
-      layout.$('body').render('./render/render/App',{},false)
-      const expected = 
-'<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title></head><body><div component="App"><div>Hello from App!</div>\n' +
-    '      <div component="Some">Hello From Some!</div></div></body></html>'
-      assert(layout.rawHtml === expected)
-   })
-
-   it('Should render with bundle',() => {
-      layout.$('body').render('./render/render/App')
-      assert(layout.rawHtml.includes('<script>'))
-   })
-
-   it('Should do nothing if element not exists',() => {
-      assert.throws(() => layout.$('main').render('./render/render/App'))
-   })
-})