@semantic-ui/component - npm Package Compare versions

Comparing version 0.1.4 to 0.1.5

package.json

@@ -15,8 +15,8 @@ {
   "dependencies": {
-    "@semantic-ui/query": "^0.1.4",
-    "@semantic-ui/reactivity": "^0.1.4",
-    "@semantic-ui/templating": "^0.1.4",
-    "@semantic-ui/utils": "^0.1.4"
+    "@semantic-ui/query": "^0.1.5",
+    "@semantic-ui/reactivity": "^0.1.5",
+    "@semantic-ui/templating": "^0.1.5",
+    "@semantic-ui/utils": "^0.1.5"
   },
-  "version": "0.1.4"
+  "version": "0.1.5"
 }

src/define-component.js

@@ -12,4 +12,4 @@ import { unsafeCSS } from 'lit';
   ast,
-  css = false,
-  pageCSS = false,
+  css = '',
+  pageCSS = '',
   componentSpec = false,
@@ -40,2 +40,3 @@ tagName,
 } = {}) => {
+
   // AST shared across instances
@@ -117,15 +118,2 @@ if(!ast) {
 
-      createRenderRoot() {
-        this.useLight = this.getAttribute('expose') !== null;
-        if (this.useLight) {
-          this.addPageCSS(webComponent, 'page', this.css, { scopeSelector: this.tagName });
-          this.storeOriginalContent.apply(this);
-          return this;
-        }
-        else {
-          const renderRoot = super.createRenderRoot(this.css);
-          return renderRoot;
-        }
-      }
-
       willUpdate() {
@@ -144,2 +132,3 @@ super.willUpdate();
           this.component = this.template.instance;
+          this.dataContext = this.template.data;
         }
@@ -146,0 +135,0 @@ // property change callbacks wont call on SSR

src/engines/lit/directives/reactive-data.js

@@ -17,3 +17,6 @@ import { nothing } from 'lit';
 
-  render(computeFunc, settings = {}) {
+  render(expression, settings = {}) {
+    this.expression = expression;
+    this.settings = settings;
+
     // Stop and clean up any existing reaction
@@ -24,38 +27,47 @@ if (this.reaction) {
 
-    const getValue = (value) => {
-      let reactiveValue = computeFunc();
-      if(settings.ifDefined) {
-        // useful for things like <input checked="{{isChecked}}">
-        // template compiler does this automatically for boolean attrs
-        if(inArray(reactiveValue, [undefined, null, false, 0])) {
-          return ifDefined(undefined);
+    // Create a new reaction to rerun the computation function if reactive data updates
+    // that dont trigger rerender occur
+
+    if(this.reaction) {
+      // if reaction already set up just return value for rerender
+      return this.getReactiveValue();
+    }
+    else {
+      // Create a new reaction to rerun the computation function if reactive data updates
+      // that dont trigger rerender occur
+      let value;
+      this.reaction = Reaction.create((computation) => {
+        if(!this.isConnected) {
+          computation.stop();
+          return;
         }
+        value = this.getReactiveValue();
+        if(this.settings.unsafeHTML) {
+          value = unsafeHTML(value);
+        }
+        if (!computation.firstRun) {
+          this.setValue(value);
+        }
+      });
+      return value;
+    }
+  }
+
+  getReactiveValue() {
+    let reactiveValue = this.expression.value();
+
+    // useful for things like <input checked="{{isChecked}}">
+    // template compiler does this automatically for boolean attrs
+    if(this.settings.ifDefined) {
+      if(inArray(reactiveValue, [undefined, null, false, 0])) {
+        return ifDefined(undefined);
       }
-      // we need to serialize arrays and objects that are rendered to html
-      if(isArray(reactiveValue) || isObject(reactiveValue)) {
-        reactiveValue = JSON.stringify(reactiveValue);
-      }
-      return reactiveValue;
-    };
+    }
 
-    // Create a new reaction to rerun the computation function
-    let value;
-    if (this.reaction) {
-      this.reaction.stop();
+    // arrays and objects are serialized for use in web component attributes
+    // maybe should check part?
+    if(isArray(reactiveValue) || isObject(reactiveValue)) {
+      reactiveValue = JSON.stringify(reactiveValue);
     }
-    this.reaction = Reaction.create((computation) => {
-      if(!this.isConnected) {
-        computation.stop();
-        return;
-      }
-      value = getValue();
-      if(settings.unsafeHTML) {
-        value = unsafeHTML(value);
-      }
-      if (!computation.firstRun) {
-        this.setValue(value);
-      }
-    });
-    // Return the initial result of the computation function
-    return value;
+    return reactiveValue;
   }
@@ -62,0 +74,0 @@

src/engines/lit/directives/render-template.js

@@ -14,3 +14,3 @@ import { directive } from 'lit/directive.js';
   }
-  render({ getTemplateName, subTemplates, data, parentTemplate }) {
+  render({ getTemplateName, templateName, subTemplates, data, parentTemplate }) {
     const unpackData = (dataObj) => {
@@ -33,3 +33,3 @@ return mapObject(dataObj, (val) => val());
         fatal(
-          `Could not find template named "${getTemplateName()}`,
+          `Could not find template named "${getTemplateName()}"`,
           subTemplates
@@ -39,3 +39,3 @@ );
       // clone if it has changed
-      this.template = template.clone({ templateName: templateName, data: unpackData(data) });
+      this.template = template.clone({ templateName, subTemplates, data: unpackData(data) });
       return true;
@@ -62,13 +62,18 @@ };
     };
-    Reaction.create((comp) => {
+
+    if (this.reaction) {
+      return noChange;
+    }
+
+    this.reaction = Reaction.create((computation) => {
       if (!this.isConnected) {
-        comp.stop();
+        computation.stop();
         return;
       }
+
       const hasCreated = maybeCreateTemplate(); // reactive reference
-      if (!comp.firstRun) {
+      const dataContext = unpackData(data); // reactive reference
+      if (!computation.firstRun) {
         attachTemplate();
-        if (!hasCreated) {
-          this.template.setDataContext(unpackData(data), { rerender: false });
-        }
+        this.template.setDataContext(dataContext, { rerender: true });
         this.setValue(renderTemplate());
@@ -75,0 +80,0 @@ }

src/engines/lit/renderer.js

@@ -18,6 +18,7 @@ import { html, svg } from 'lit';
 
-  constructor({ ast, data, subTemplates, snippets, helpers, isSVG }) {
+  constructor({ ast, data, template, subTemplates, snippets, helpers, isSVG }) {
     this.ast = ast || '';
     this.data = data;
     this.renderTrees = [];
+    this.template = template;
     this.subTemplates = subTemplates;
@@ -86,3 +87,3 @@ this.resetHTML();
         case 'slot':
-          if (node.name) {
+          if(node.name) {
             this.addHTML(`<slot name="${node.name}"></slot>`);
@@ -105,9 +106,14 @@ }
     const directiveMap = (value, key) => {
-      if (key == 'branches') {
-        return value.map((branch) => mapObject(branch, directiveMap));
+      if(key == 'branches') {
+        return value.map((branch) => {
+          if(branch.condition) {
+            branch.expression = branch.condition;
+          }
+          return mapObject(branch, directiveMap);
+        });
       }
-      if (key == 'condition') {
+      if(key == 'condition') {
         return () => this.evaluateExpression(value, data);
       }
-      if (key == 'content') {
+      if(key == 'content') {
         return () => this.renderContent({ ast: value, data });
@@ -117,2 +123,3 @@ }
     };
+    node.expression = node.condition; // store original expression for debugging
     let conditionalArguments = mapObject(node, directiveMap);
@@ -124,3 +131,3 @@ return reactiveConditional(conditionalArguments);
     const directiveMap = (value, key) => {
-      if (key == 'over') {
+      if(key == 'over') {
         return (expressionString) => {
@@ -131,3 +138,3 @@ const computedValue = this.evaluateExpression(value, data);
       }
-      if (key == 'content') {
+      if(key == 'content') {
         return (eachData) => {
@@ -148,3 +155,3 @@ return this.renderContent({
     const templateName = this.lookupExpressionValue(node.name, data);
-    if (this.snippets[templateName]) {
+    if(this.snippets[templateName]) {
       return this.evaluateSnippet(node, data);
@@ -213,3 +220,3 @@ }
     const snippet = this.snippets[snippetName];
-    if (!snippet) {
+    if(!snippet) {
       fatal(`Snippet "${snippetName}" not found`);
@@ -228,5 +235,6 @@ }
       subTemplates: this.subTemplates,
+      templateName: node.name,
       getTemplateName: () => this.evaluateExpression(node.name, data), // template name can be dynamic
       data: templateData,
-      parentTemplate: data,
+      parentTemplate: this.template,
     });
@@ -241,8 +249,9 @@ }
   ) {
-    if (typeof expression === 'string') {
-      if (asDirective) {
-        return reactiveData(
-          () => this.lookupExpressionValue(expression, this.data),
-          { ifDefined, unsafeHTML }
-        );
+    if(typeof expression === 'string') {
+      if(asDirective) {
+        const dataArguments = {
+          expression,
+          value: () => this.lookupExpressionValue(expression, this.data)
+        };
+        return reactiveData(dataArguments, { ifDefined, unsafeHTML });
       }
@@ -263,5 +272,5 @@ else {
         const token = tokens.shift();
-        if (token === '(') {
+        if(token === '(') {
           result.push(parse(tokens));
-        } else if (token === ')') {
+        } else if(token === ')') {
           return result;
@@ -309,3 +318,3 @@ } else {
 
-    if (isArray(token)) {
+    if(isArray(token)) {
       // Recursively evaluate nested expressions
@@ -323,3 +332,3 @@ return this.lookupExpressionValue(token, data);
     const helper = this.helpers[token];
-    if (isFunction(helper)) {
+    if(isFunction(helper)) {
       return helper;
@@ -330,3 +339,3 @@ }
       return path.split('.').reduce((acc, part) => {
-        if (acc === undefined) {
+        if(acc === undefined) {
           return undefined;
@@ -338,3 +347,3 @@ }
         ;
-        if (current == undefined) {
+        if(current == undefined) {
           return undefined;
@@ -367,3 +376,3 @@ /* erroring on intermediate undefined
     // retrieve reactive value
-    if (dataValue !== undefined) {
+    if(dataValue !== undefined) {
       return (dataValue instanceof ReactiveVar)
@@ -380,3 +389,3 @@ ? dataValue.value
     // Check if this is a string literal (single or double quotes)
-    if (token.length > 1 && (token[0] === "'" || token[0] === '"') && token[0] === token[token.length - 1]) {
+    if(token.length > 1 && (token[0] === "'" || token[0] === '"') && token[0] === token[token.length - 1]) {
       return token.slice(1, -1).replace(/\\(['"])/g, '$1');
@@ -392,3 +401,3 @@ }
     // check if this is a number
-    if (!Number.isNaN(parseFloat(token))) {
+    if(!Number.isNaN(parseFloat(token))) {
       return Number(token);
@@ -400,3 +409,3 @@ }
     // we want to concat all html added consecutively
-    if (this.lastHTML) {
+    if(this.lastHTML) {
       const lastHTML = this.html.pop();
@@ -430,2 +439,3 @@ html = `${lastHTML}${html}`;
       helpers: this.helpers,
+      template: this.template,
     });
@@ -432,0 +442,0 @@ this.renderTrees.push(tree);

src/web-component.js

 import { LitElement } from 'lit';
 import { each, isFunction, kebabToCamel, keys, unique, isServer, inArray, get } from '@semantic-ui/utils';
+import { ReactiveVar } from '@semantic-ui/reactivity';
 import { $ } from '@semantic-ui/query';
@@ -197,6 +198,5 @@ import { scopeStyles } from './helpers/scope-styles.js';
 
-
   /* Create a proxy object which returns the current setting
      we need this over a getter/setter because settings are
-     destructured in function arguments
+     destructured in function arguments which locks their value in time
      i.e. onCreated({settings}) { }
@@ -206,2 +206,7 @@ */
     let component = this;
+    /*
+      To make settings reactive references we need to create
+      reactive references for any setting
+    */
+    component.settingsVars = new Map();
     return new Proxy({}, {
@@ -213,6 +218,23 @@ get: (target, property) => {
         });
-        return get(settings, property);
+        const setting = get(settings, property);
+        let reactiveVar = component.settingsVars.get(property);
+        if(reactiveVar) {
+          reactiveVar.get();
+        }
+        else {
+          reactiveVar = new ReactiveVar(setting);
+          component.settingsVars.set(property, reactiveVar);
+        }
+        return setting;
       },
       set: (target, property, value, receiver) => {
         component.setSetting(property, value);
+        let reactiveVar = component.settingsVars.get(property);
+        if(reactiveVar) {
+          reactiveVar.set(value);
+        }
+        else {
+          reactiveVar = new ReactiveVar(value);
+          component.settingsVars.set(property, reactiveVar);
+        }
         return true;
@@ -219,0 +241,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

47510

increased by2.77%

Lines of code

1397

increased by2.34%

Dependency changes

• + Added@semantic-ui/component@0.1.6(transitive)

• + Added@semantic-ui/query@0.1.6(transitive)

• + Added@semantic-ui/reactivity@0.1.6(transitive)

• + Added@semantic-ui/templating@0.1.6(transitive)

• + Added@semantic-ui/utils@0.1.6(transitive)

• - Removed@semantic-ui/component@0.1.7(transitive)

• - Removed@semantic-ui/query@0.1.7(transitive)

• - Removed@semantic-ui/reactivity@0.1.7(transitive)

• - Removed@semantic-ui/templating@0.1.7(transitive)

• - Removed@semantic-ui/utils@0.1.7(transitive)

• Updated@semantic-ui/query@^0.1.5

• Updated@semantic-ui/reactivity@^0.1.5

• Updated@semantic-ui/templating@^0.1.5

• Updated@semantic-ui/utils@^0.1.5