als-component - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

build.js

 const UglifyJS = require("uglify-js");
-const { writeFileSync } = require('fs');
-const { join } = require('path')
-const Component = require('./index')
-
-writeFileSync(join(__dirname,'component.js'),Component.toString(),'utf-8')
-const minified = UglifyJS.minify(Component.toString(),{ keep_fnames: true }).code
-writeFileSync(join(__dirname,'component.min.js'),minified,'utf-8')
-console.log('Browser file builded')
+const { writeFileSync, readFileSync } = require('fs');
+const minified = UglifyJS.minify(readFileSync('./component.js','utf-8'),{ keep_fnames: true }).code
+writeFileSync('./component.min.js',minified,'utf-8')

component.js

 class Component {
-   static isBrowser = !(typeof window === 'undefined' && typeof process === 'object' && process.version !== undefined)
+   static isBrowser = true
    static componentsToUpdate = new Set()
@@ -4,0 +4,0 @@ static components = new WeakMap()

component.min.js

@@ -1,1 +0,1 @@
-class Component{static isBrowser=!("undefined"==typeof window&&"object"==typeof process&&void 0!==process.version);static componentsToUpdate=new Set;static components=new WeakMap;static qs(t,e=document){return e.querySelector(t)}static qsa(t,e=document){return[...e.querySelectorAll(t)]}static get isAsync(){return"AsyncFunction"===this.prototype.render.constructor.name}actions=[];counter=0;get element(){return Component.isBrowser?document.querySelector(this.selector):null}set elementOuter(t){var e=this.element;e&&(e.outerHTML=t)}constructor(t={},e){this.isAsync=this.constructor.isAsync,this.props=t,this.inner=e,this.name=this.constructor.name+(this.props.key||""),this.selector=`[component=${this.name}]`,this.hooks={mount:[],unmount:[]},(Component.components[this.name]=this).Component=Component}on(t,e){this.hooks[t]&&this.hooks[t].push(e)}async callAsync(){return(await this.render(this.props,this.inner)).replace(/^\<\w\w*/,t=>`${t} component="${this.name}"`)}callSync(){return this.render(this.props,this.inner).replace(/^\<\w\w*/,t=>`${t} component="${this.name}"`)}call(){return this.Component.componentsToUpdate.add(this),this.isAsync?this.callAsync():this.callSync()}action(t,e){var n=this.name+this.counter++;return this.actions.push({event:t,id:n,fn:e}),n}async buildAsync(t=!0){var e=await this.call();return t&&(this.elementOuter=e),this.Component.isBrowser&&this.runActions(),e}buildSync(t=!0){var e=this.call();return t&&(this.elementOuter=e),this.Component.isBrowser&&this.runActions(),e}build(t){return this.isAsync?this.buildAsync(t):this.buildSync(t)}update(t=this.props,e=this.inner){return this.props=t,this.inner=e,this.build(!0)}runActions(){var{components:t,componentsToUpdate:e}=this.Component;e.forEach(t=>{var{actions:e,hooks:n,selector:o}=t;let s=document.querySelector(o),r=s&&s.childNodes.length?s:document;n.mount.forEach(t=>t(s)),e.forEach(({event:e,fn:n,id:t})=>{let o=r.querySelectorAll(`[${e}="${t}"]`);0!==(o=0===o.length?document.querySelectorAll(`[${e}="${t}"]`):o).length&&o.forEach(t=>{"load"===e?n(t):"function"==typeof t.addEventListener&&t.addEventListener(e,n)})}),t.actions=[],t.hooks.mount=[],t.count=0});for(let e in t){var{selector:n,hooks:o}=t[e];document.querySelector(n)||(o.unmount.forEach(t=>t(e)),delete t[e])}this.Component.componentsToUpdate.clear()}}
+class Component{static isBrowser=!0;static componentsToUpdate=new Set;static components=new WeakMap;static qs(t,e=document){return e.querySelector(t)}static qsa(t,e=document){return[...e.querySelectorAll(t)]}static get isAsync(){return"AsyncFunction"===this.prototype.render.constructor.name}actions=[];counter=0;get element(){return Component.isBrowser?document.querySelector(this.selector):null}set elementOuter(t){var e=this.element;e&&(e.outerHTML=t)}constructor(t={},e){this.isAsync=this.constructor.isAsync,this.props=t,this.inner=e,this.name=this.constructor.name+(this.props.key||""),this.selector=`[component=${this.name}]`,this.hooks={mount:[],unmount:[]},(Component.components[this.name]=this).Component=Component}on(t,e){this.hooks[t]&&this.hooks[t].push(e)}async callAsync(){return(await this.render(this.props,this.inner)).replace(/^\<\w\w*/,t=>`${t} component="${this.name}"`)}callSync(){return this.render(this.props,this.inner).replace(/^\<\w\w*/,t=>`${t} component="${this.name}"`)}call(){return this.Component.componentsToUpdate.add(this),this.isAsync?this.callAsync():this.callSync()}action(t,e){var n=this.name+this.counter++;return this.actions.push({event:t,id:n,fn:e}),n}async buildAsync(t=!0){var e=await this.call();return t&&(this.elementOuter=e),this.Component.isBrowser&&this.runActions(),e}buildSync(t=!0){var e=this.call();return t&&(this.elementOuter=e),this.Component.isBrowser&&this.runActions(),e}build(t){return this.isAsync?this.buildAsync(t):this.buildSync(t)}update(t=this.props,e=this.inner){return this.props=t,this.inner=e,this.build(!0)}runActions(){var{components:t,componentsToUpdate:e}=this.Component;e.forEach(t=>{var{actions:e,hooks:n,selector:s}=t;let o=document.querySelector(s),r=o&&o.childNodes.length?o:document;n.mount.forEach(t=>t(o)),e.forEach(({event:e,fn:n,id:t})=>{let s=r.querySelectorAll(`[${e}="${t}"]`);0!==(s=0===s.length?document.querySelectorAll(`[${e}="${t}"]`):s).length&&s.forEach(t=>{"load"===e?n(t):"function"==typeof t.addEventListener&&t.addEventListener(e,n)})}),t.actions=[],t.hooks.mount=[],t.count=0});for(let e in t){var{selector:n,hooks:s}=t[e];document.querySelector(n)||(s.unmount.forEach(t=>t(e)),delete t[e])}this.Component.componentsToUpdate.clear()}}

index.js

 class Component {
-   static isBrowser = !(typeof window === 'undefined' && typeof process === 'object' && process.version !== undefined)
-   static componentsToUpdate = new Set()
+   static isBrowser = false
    static components = new WeakMap()
-   static qs(selector, host = document) { return host.querySelector(selector) }
-   static qsa(selector, host = document) { return [...host.querySelectorAll(selector)] }
    static get isAsync() { return this.prototype.render.constructor.name === 'AsyncFunction' };
-
-   actions = []; counter = 0;
-   get element() { return Component.isBrowser ? document.querySelector(this.selector) : null }
-   set elementOuter(v) {
-      const element = this.element;
-      if (element) element.outerHTML = v
-   }
-
    constructor(props = {}, inner) {
+      this.counter = 0;
       this.isAsync = this.constructor.isAsync
@@ -21,4 +11,2 @@ this.props = props;
       this.name = this.constructor.name + (this.props.key ? this.props.key : '');
-      this.selector = `[component=${this.name}]`;
-      this.hooks = { mount: [], unmount: [] };
       Component.components[this.name] = this
@@ -28,64 +16,13 @@ this.Component = Component
 
-   on(event, fn) { if (this.hooks[event]) this.hooks[event].push(fn) }
-
+   on(event, fn) { }
    async callAsync() { return (await this.render(this.props, this.inner)).replace(/^\<\w\w*/, m => `${m} component="${this.name}"`) }
    callSync() { return this.render(this.props, this.inner).replace(/^\<\w\w*/, m => `${m} component="${this.name}"`) }
-   call() { this.Component.componentsToUpdate.add(this); return this.isAsync ? this.callAsync() : this.callSync() }
-
-   action(event, fn) {
-      const id = this.name + this.counter++;
-      this.actions.push({ event, id, fn });
-      return id;
-   }
-
-   async buildAsync(updateElement = true) {
-      const result = await this.call()
-      if (updateElement) this.elementOuter = result
-      if (this.Component.isBrowser) this.runActions()
-      return result
-   }
-
-   buildSync(updateElement = true) {
-      const result = this.call()
-      if (updateElement) this.elementOuter = result
-      if (this.Component.isBrowser) this.runActions()
-      return result
-   }
-
-   build(updateElement) { return this.isAsync ? this.buildAsync(updateElement) : this.buildSync(updateElement) }
-   update(props = this.props, inner = this.inner) { this.props = props; this.inner = inner; return this.build(true) }
-
-   runActions() {
-      const { components, componentsToUpdate } = this.Component
-      componentsToUpdate.forEach(component => {
-         const { actions, hooks, selector } = component;
-         const element = document.querySelector(selector);
-         const parent = element && element.childNodes.length ? element : document;
-         hooks.mount.forEach(fn => fn(element));
-         actions.forEach(({ event, fn, id }) => {
-            let elementsForEvent = parent.querySelectorAll(`[${event}="${id}"]`);
-            if (elementsForEvent.length === 0) elementsForEvent = document.querySelectorAll(`[${event}="${id}"]`)
-            if (elementsForEvent.length === 0) return;
-            elementsForEvent.forEach(elementForEvent => {
-               if (event === 'load') fn(elementForEvent);
-               else if (typeof elementForEvent.addEventListener === 'function') {
-                  elementForEvent.addEventListener(event, fn);
-               }
-            })
-         })
-         component.actions = [];
-         component.hooks.mount = [];
-         component.count = 0;
-      })
-
-      for (const name in components) { // check if there are element's components which removed
-         const { selector, hooks } = components[name]
-         if (document.querySelector(selector)) continue;
-         hooks.unmount.forEach(fn => fn(name));
-         delete components[name];
-      }
-      this.Component.componentsToUpdate.clear()
-   }
+   call() { return this.isAsync ? this.callAsync() : this.callSync() }
+   action(event, fn) { return this.name + this.counter++; }
+   async buildAsync() { return await this.call() }
+   buildSync() { return this.call() }
+   build() { return this.isAsync ? this.buildAsync() : this.buildSync() }
+   update(props = this.props, inner = this.inner) { this.props = props; this.inner = inner; return this.build() }
 }
 
 module.exports = Component

package.json

 {
   "name": "als-component",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "main": "index.js",
@@ -5,0 +5,0 @@ "directories": {

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

47613

increased by6.12%

Number of package files

20

increased by5.26%

Lines of code

765

increased by10.87%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes