als-component - npm Package Compare versions

Comparing version 0.9.7 to 0.9.8

component.js

@@ -14,2 +14,7 @@ class Component {
    }
+   static create(componentName,fn,data) {
+      if(Component[componentName] == undefined)
+         new Component(componentName,fn,data)
+      return Component[componentName]
+   }
 
@@ -23,3 +28,3 @@ constructor(componentName,fn,data) {
       this.life(fn)
-      Component.components[componentName] = Component[this.componentName] = this
+      Component.components[this.componentName] = Component[this.componentName] = this
       this.methods = {get $() {return Component[componentName]}}
@@ -26,0 +31,0 @@ this.actions = {get $() {return Component[componentName]}}

export.js

@@ -1,41 +0,50 @@
-module.exports = function (obj) {
-   let nl = '\r\n'
+let nl = '\r\n'
+function addMethods(methods,excludes=[],name,errors,result='') {
+   result += Object.keys(methods).map(methodName => {
+      if(!excludes.includes(methodName)) 
+         return addMethod(name,methodName,methods,errors)
+   }).join(nl)
+   return result      
+}
+
+function addMethod(name,methodName,methods,errors) {
+   if(methods[methodName] == undefined) return ''
+   try {
+      return nl+`Component.${name}.${methodName} = ${methods[methodName].toString()}`
+   } catch (error) {
+      if(errors) console.log(`${methodName} not added`,error)
+      return ''
+   }
+}
+
+module.exports = function(obj,errors=false) {
    let Component = require('als-component').Component
    let result = Component.toString()
    result += `${nl}window.$C = Component${nl}`
-   result += Object.keys(obj.methods).map(methodName => 
-      `${nl}Component.methods.${methodName} = ${obj.methods[methodName].toString()}${nl}`
-   ).join('')
-   result += Object.keys(obj.actions).map(methodName => 
-      `${nl}Component.actions.${methodName} = ${obj.actions[methodName].toString()}${nl}`
-   ).join('')
+   result += addMethods(obj.methods,[],'methods',errors)
+   result += addMethods(obj.actions,[],'actions',errors)
    result += `${nl}Component.vars = ${JSON.stringify(obj.vars)}${nl}`
-   Object.keys(obj).forEach(key => {
-      let firstChart = key.charAt(0)
-      if(firstChart == firstChart.toUpperCase()) {
-         let C = obj[key]
-         let Cname = C.componentName
-         result += `${nl}new Component('${Cname}',${C.originalFn.toString()},${JSON.stringify(C.data)})${nl}`
-         result += `${nl}Component.${Cname}.vars = ${JSON.stringify(C.vars)}${nl}`
-         result += Object.keys(C.methods).map(methodName =>  {
-            if(methodName !== '$') 
-               return `${nl}Component.${Cname}.methods['${methodName}'] = ${C.methods[methodName].toString()}${nl}`
-            }).join('')
-         result += Object.keys(C.actions).map(actionName => {
-            if(actionName !== '$') 
-               return `${nl}Component.${Cname}.actions['${actionName}'] = ${C.actions[actionName].toString()}${nl}`
-         }).join('')
-         result += C.before !== undefined ? `${nl}Component.${Cname}.before = ${C.before.toString()}${nl}` : ''
-         result += C.onMount !== undefined ? `${nl}Component.${Cname}.onMount  = ${C.onMount.toString()}${nl}` : ''
-         result += C.onFirstMount !== undefined ? `${nl}Component.${Cname}.onFirstMount   = ${C.onFirstMount.toString()}${nl}` : ''
-         result += C.onLoad !== undefined ? `${nl}Component.${Cname}.onLoad = ${C.onLoad.toString()}${nl}` : ''
-         result += (C.onLoad !== undefined && typeof C.onLoad == 'function') 
-            ? `${nl}window.addEventListener("load", () => Component.${Cname}.onLoad())${nl}` :''
-         result += Object.keys(C.ids).length > 0 ? Object.keys(C.ids).map(id => {
-            let data = JSON.stringify(C.ids[id].data)
-            return `Component.${Cname}.getData(${data},'${id}')`
-         }) : ''
-      }
+   Object.keys(obj.components).forEach(Cname => {
+      let C = obj.components[Cname]
+      result += `${nl}new Component('${Cname}',${C.originalFn.toString()},${JSON.stringify(C.data)})${nl}`
+      result += `${nl}Component.${Cname}.vars = ${JSON.stringify(C.vars)}${nl}`
+      
+      result += addMethods(C.methods,['$'],`${Cname}.methods`,errors)
+      result += addMethods(C.actions,['$'],`${Cname}.actions`,errors)
+      
+      result += addMethod(Cname,'before',C,errors)
+      result += addMethod(Cname,'onMount',C,errors)
+      result += addMethod(Cname,'onFirstMount',C,errors)
+      result += addMethod(Cname,'onLoad',C,errors)
+
+      result += (C.onLoad !== undefined && typeof C.onLoad == 'function') 
+         ? `${nl}window.addEventListener("load", () => Component.${Cname}.onLoad())${nl}` :''
+     
+      result += Object.keys(C.ids).length > 0 ? Object.keys(C.ids).map(id => {
+         let data = JSON.stringify(C.ids[id].data)
+         return `Component.${Cname}.setData(${data},'${id}')`
+      }) : ''
    })
+
    return result
 }

main.js

@@ -0,4 +1,11 @@
+function get() {
+   let {join} = require('path')
+   let path = join(__dirname,'component.js')
+   delete require.cache[require.resolve(path)];
+   let Component = require(path)
+   return Component
+}
 let Component = require('./component')
-let Export = require('./export')
+let Export = require('als-component/export')
 
-module.exports = {Component,Export}
+module.exports = {Component,Export,get}

package.json

 {
   "name": "als-component",
-  "version": "0.9.7",
-  "description": "Managing components and states.",
+  "version": "0.9.8",
+  "description": "Dynamicly manage dom content as components and states on frontend and backend.",
   "main": "main.js",
@@ -6,0 +6,0 @@ "author": "Alex Sorkin",

readme.md

@@ -6,2 +6,6 @@ # Als-component
   - [About](#about)
+    - [New in 0.9.8](#new-in-098)
+    - [New in 0.9.7](#new-in-097)
+    - [New in 0.9.6](#new-in-096)
+    - [New in 0.9.5](#new-in-095)
   - [Get started](#get-started)
@@ -11,2 +15,3 @@ - [Instalation and Cdn](#instalation-and-cdn)
     - [Example](#example)
+    - [Component.create](#componentcreate)
   - [Life cycle for update/get](#life-cycle-for-updateget)
@@ -21,6 +26,13 @@ - [Simple redux system](#simple-redux-system)
 ## About
-Als-component allows you to manage dom content as components with JavaScript like you do it in React, but in more simple way.
-You can use sane Component on backend and on frontend. 
+Dynamicly manage dom content as components and states on frontend and backend. You can do it with Vite like you do it in React, on Express as middleware or simply in frontend.
 
-**New in 0.9.7**
+*We are closer than ever to final release!*
+
+### New in 0.9.8
+  * Component = require('als-component').get() - get Component after clearing cache
+  * Component.export - changed and fixed. Now it's return errors. 
+  * Component.create() - checks if Component not exists
+
+
+### New in 0.9.7
   * if component doesnt return enything, no error, the result 'undefined'
@@ -30,7 +42,7 @@ * inside onLoad function available this (component it self)
 
-**New in 0.9.6**
+### New in 0.9.6
   * Export for Component.actions fixed
 
 
-**New in 0.9.5**
+### New in 0.9.5
   * import is separated to ``als-front-import``
@@ -55,3 +67,2 @@ * Component.components
 
-We are closer than ever to final release!
 
@@ -146,3 +157,11 @@ ## Get started
 
+### Component.create
+There is static method ``Component.create()`` which equivalent to ``new Component()``. The method, checking if component allready exists and create new one if not. Return the component obj. 
 
+Syntax:
+```javascript
+Component.create(ComponentName,fn,data):object instance of Component
+```
+
+
 ## Life cycle for update/get
@@ -363,12 +382,23 @@ You can add functions for executing on different stages of binding process.
 let app = express()
-let {Component,Export} = require('als-component')
+let {Component,Export,get} = require('als-component')
+let consoleLogErrors = true
 
-global.Component = $C = Component 
-app.get('/',[
+app.get('/:name',[
    (req,res,next) => {
-      require('./app')
+      req.Component = get()
       next()
    },
    (req,res) => {
-      let name = 'Alex'
+      let {Component} = req
+      new Component('App',function(data) {
+         return /*html*/`
+         <div>Hello ${data.name}</div>
+         `
+      })
+      $C.App.onLoad = function() {
+         console.log('hello '+this.data.name)
+      }
+
+
+      let name = req.params.name
    return res.end (/*html*/`<!DOCTYPE html>
@@ -384,3 +414,3 @@ <html lang="en">
    </body>
-   <script>${Export(Component)}</script>
+   <script>${Export(Component,consoleLogErrors)}</script>
 </html>
@@ -393,19 +423,8 @@ `)
 
-**app.js**
-```javascript
-new Component('app',function(data) {
-   return /*html*/`
-   <div>Hello ${data.name}</div>
-   `
-})
-$C.App.onLoad = function() {
-   console.log('hello')
-}
-```
-
 Example above, showing the way for using Component on frontent and on backend. Here are the highlights:
-1. Define global.Component before using the routes - now Component available anywhere and it's the same one anywhere.
-2. Use Export method for exporting global.Component to frontend.
+1. Define req.Component widht als-component.get method as middleware on route you want to use it.
+2. Use Export method for exporting Component to frontend.
 3. Use onLoad hook to add function which will runs then all content will be loaded
-4. Include components as middleware, if you need those components only for some routes. Otherwise, component will be available for all routes.
 
+Use get() method to require component and use it as miidleware, to include on each route only it's relevant components and methods. 
+

New alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

20857

increased by4.59%

Lines of code

191

increased by7.91%

Number of lines in readme file

422

increased by4.71%

Worsened metrics

Number of low supply chain risk alerts

3

increased by200%

No dependency changes