solid-js - npm Package Compare versions

Comparing version 1.7.2 to 1.7.3

dist/dev.js

@@ -224,3 +224,3 @@ let taskIdCounter = 1,
   if (s) c.suspense = s;
-  c.user = true;
+  if (!options || !options.render) c.user = true;
   Effects ? Effects.push(c) : updateComputation(c);
@@ -472,2 +472,3 @@ }
   };
+  if (Transition && Transition.running) Transition.sources.add(Owner);
   try {
@@ -474,0 +475,0 @@ return fn();

dist/solid.js

@@ -208,3 +208,3 @@ let taskIdCounter = 1,
   if (s) c.suspense = s;
-  c.user = true;
+  if (!options || !options.render) c.user = true;
   Effects ? Effects.push(c) : updateComputation(c);
@@ -456,2 +456,3 @@ }
   };
+  if (Transition && Transition.running) Transition.sources.add(Owner);
   try {
@@ -458,0 +459,0 @@ return fn();

html/dist/html.js

@@ -28,3 +28,3 @@ import { effect, style, insert, untrack, spread, createComponent, delegateEvents, classList, mergeProps, dynamicProperty, setAttribute, setAttributeNS, addEventListener, Aliases, getPropAlias, Properties, ChildProperties, DelegatedEvents, SVGElements, SVGNamespace } from 'solid-js/web';
     voidElement: false,
-    attrs: {},
+    attrs: [],
     children: []
@@ -48,3 +48,15 @@ };
   for (const match of tag.matchAll(reg)) {
-    res.attrs[match[1] || match[2]] = match[4] || match[5] || '';
+    if ((match[1] || match[2]).startsWith('use:')) {
+      res.attrs.push({
+        type: 'directive',
+        name: match[1] || match[2],
+        value: match[4] || match[5] || ''
+      });
+    } else {
+      res.attrs.push({
+        type: 'attr',
+        name: match[1] || match[2],
+        value: match[4] || match[5] || ''
+      });
+    }
   }
@@ -121,4 +133,4 @@ return res;
   const buff = [];
-  for (const key in attrs) {
-    buff.push(key + '="' + attrs[key].replace(/"/g, '"') + '"');
+  for (const attr of attrs) {
+    buff.push(attr.name + '="' + attr.value.replace(/"/g, '"') + '"');
   }
@@ -152,4 +164,4 @@ if (!buff.length) {
 const spaces = " \\f\\n\\r\\t";
-const almostEverything = "[^ " + spaces + "\\/>\"'=]+";
-const attrName = "[ " + spaces + "]+" + almostEverything;
+const almostEverything = "[^" + spaces + "\\/>\"'=]+";
+const attrName = "[ " + spaces + "]+(?:use:<!--#-->|" + almostEverything + ')';
 const tagName = "<([A-Za-z$#]+[A-Za-z0-9:_-]*)((?:";
@@ -166,3 +178,3 @@ const attrPartials = "(?:\\s*=\\s*(?:'[^']*?'|\"[^\"]*?\"|\\([^)]*?\\)|<[^>]*?>|" + almostEverything + "))?)";
 function replaceAttributes($0, $1, $2) {
-  return $1 + ($2[0] === '"' || $2[0] === "'" ? $2.replace(/<!--#-->/g, "###") : '"###"');
+  return $1.replace(/<!--#-->/g, "###") + ($2[0] === '"' || $2[0] === "'" ? $2.replace(/<!--#-->/g, "###") : '"###"');
 }
@@ -175,4 +187,13 @@ function fullClosing($0, $1, $2) {
 }
+function parseDirective(name, value, tag, options) {
+  if (name === 'use:###' && value === '###') {
+    const count = options.counter++;
+    options.exprs.push(`typeof exprs[${count}] === "function" ? r.use(exprs[${count}], ${tag}, exprs[${options.counter++}]) : (()=>{throw new Error("use:### must be a function")})()`);
+  } else {
+    throw new Error(`Not support syntax ${name} must be use:{function}`);
+  }
+}
 function createHTML(r, {
-  delegateEvents = true
+  delegateEvents = true,
+  functionBuilder = (...args) => new Function(...args)
 } = {}) {
@@ -187,3 +208,3 @@ let uuid = 1;
   };
-  function createTemplate(statics) {
+  function createTemplate(statics, opt) {
     let i = 0,
@@ -195,4 +216,8 @@ markup = "";
     markup = markup + statics[i];
-    markup = markup.replace(selfClosing, fullClosing).replace(/<(<!--#-->)/g, "<###").replace(/\.\.\.(<!--#-->)/g, "###").replace(attrSeeker, attrReplacer).replace(/>\n+\s*/g, ">").replace(/\n+\s*</g, "<").replace(/\s+</g, " <").replace(/>\s+/g, "> ");
-    const [html, code] = parseTemplate(parse(markup)),
+    const replaceList = [[selfClosing, fullClosing], [/<(<!--#-->)/g, "<###"], [/\.\.\.(<!--#-->)/g, "###"], [attrSeeker, attrReplacer], [/>\n+\s*/g, ">"], [/\n+\s*</g, "<"], [/\s+</g, " <"], [/>\s+/g, "> "]];
+    markup = replaceList.reduce((acc, x) => {
+      return acc.replace(x[0], x[1]);
+    }, markup);
+    const pars = parse(markup);
+    const [html, code] = parseTemplate(pars, opt.funcBuilder),
       templates = [];
@@ -331,10 +356,20 @@ for (let i = 0; i < html.length; i++) {
     for (let i = 0; i < keys.length; i++) {
-      const name = keys[i],
-        value = node.attrs[name];
-      if (name === "###") {
-        propGroups.push(`exprs[${options.counter++}]`);
-        propGroups.push(props = []);
-      } else if (value === "###") {
-        props.push(`${name}: exprs[${options.counter++}]`);
-      } else props.push(`${name}: "${value}"`);
+      const {
+        type,
+        name,
+        value
+      } = node.attrs[i];
+      if (type === 'attr') {
+        if (name === "###") {
+          propGroups.push(`exprs[${options.counter++}]`);
+          propGroups.push(props = []);
+        } else if (value === "###") {
+          props.push(`${name}: exprs[${options.counter++}]`);
+        } else props.push(`${name}: "${value}"`);
+      } else if (type === 'directive') {
+        const tag = `_$el${uuid++}`;
+        const topDecl = !options.decl.length;
+        options.decl.push(topDecl ? "" : `${tag} = ${options.path}.${options.first ? "firstChild" : "nextSibling"}`);
+        parseDirective(name, value, tag, options);
+      }
     }
@@ -414,34 +449,54 @@ if (node.children.length === 1 && node.children[0].type === "comment" && node.children[0].content === "#") {
       options.decl.push(topDecl ? "" : `${tag} = ${options.path}.${options.first ? "firstChild" : "nextSibling"}`);
-      const keys = Object.keys(node.attrs);
       const isSVG = r.SVGElements.has(node.name);
       const isCE = node.name.includes("-");
       options.hasCustomElement = isCE;
-      if (keys.includes("###")) {
+      if (node.attrs.some(e => e.name === "###")) {
         const spreadArgs = [];
         let current = "";
-        for (let i = 0; i < keys.length; i++) {
-          const name = keys[i],
-            value = node.attrs[name];
-          if (value.includes("###")) {
-            let count = options.counter++;
-            current += `${name}: ${name !== "ref" ? `typeof exprs[${count}] === "function" ? exprs[${count}]() : ` : ""}exprs[${count}],`;
-            delete node.attrs[name];
-          } else if (name === "###") {
-            if (current.length) {
-              spreadArgs.push(`()=>({${current}})`);
-              current = "";
+        const newAttrs = [];
+        for (let i = 0; i < node.attrs.length; i++) {
+          const {
+            type,
+            name,
+            value
+          } = node.attrs[i];
+          if (type === 'attr') {
+            if (value.includes("###")) {
+              let count = options.counter++;
+              current += `${name}: ${name !== "ref" ? `typeof exprs[${count}] === "function" ? exprs[${count}]() : ` : ""}exprs[${count}],`;
+            } else if (name === "###") {
+              if (current.length) {
+                spreadArgs.push(`()=>({${current}})`);
+                current = "";
+              }
+              spreadArgs.push(`exprs[${options.counter++}]`);
+            } else {
+              newAttrs.push(node.attrs[i]);
             }
-            spreadArgs.push(`exprs[${options.counter++}]`);
-            delete node.attrs[name];
+          } else if (type === 'directive') {
+            parseDirective(name, value, tag, options);
           }
         }
-        if (current.length) spreadArgs.push(`()=>({${current}})`);
+        node.attrs = newAttrs;
+        if (current.length) {
+          spreadArgs.push(`()=>({${current}})`);
+        }
         options.exprs.push(`r.spread(${tag},${spreadArgs.length === 1 ? `typeof ${spreadArgs[0]} === "function" ? r.mergeProps(${spreadArgs[0]}) : ${spreadArgs[0]}` : `r.mergeProps(${spreadArgs.join(",")})`},${isSVG},${!!node.children.length})`);
       } else {
-        for (let i = 0; i < keys.length; i++) {
-          const name = keys[i],
-            value = node.attrs[name];
-          if (value.includes("###")) {
-            delete node.attrs[name];
-            parseAttribute(node, tag, name, value, isSVG, isCE, options);
+        for (let i = 0; i < node.attrs.length; i++) {
+          const {
+            type,
+            name,
+            value
+          } = node.attrs[i];
+          if (type === 'directive') {
+            parseDirective(name, value, tag, options);
+            node.attrs.splice(i, 1);
+            i--;
+          } else if (type === "attr") {
+            if (value.includes("###")) {
+              node.attrs.splice(i, 1);
+              i--;
+              parseAttribute(node, tag, name, value, isSVG, isCE, options);
+            }
           }
@@ -473,3 +528,3 @@ }
   }
-  function parseTemplate(nodes) {
+  function parseTemplate(nodes, funcBuilder) {
     const options = {
@@ -501,6 +556,8 @@ path: "",
     const templateNodes = [origNodes].concat(options.templateNodes);
-    return [templateNodes.map(t => stringify(t)), new Function("tmpls", "exprs", "r", options.decl.join(",\n") + ";\n" + options.exprs.join(";\n") + (toplevel ? "" : `;\nreturn _$el${id};\n`))];
+    return [templateNodes.map(t => stringify(t)), funcBuilder("tmpls", "exprs", "r", options.decl.join(",\n") + ";\n" + options.exprs.join(";\n") + (toplevel ? "" : `;\nreturn _$el${id};\n`))];
   }
   function html(statics, ...args) {
-    const templates = cache.get(statics) || createTemplate(statics);
+    const templates = cache.get(statics) || createTemplate(statics, {
+      funcBuilder: functionBuilder
+    });
     return templates[0].create(templates, args, r);
@@ -507,0 +564,0 @@ }

html/types/lit.d.ts

@@ -35,5 +35,6 @@ type MountableElement = Element | Document | ShadowRoot | DocumentFragment | Node;
 };
-export declare function createHTML(r: Runtime, { delegateEvents }?: {
-    delegateEvents?: boolean | undefined;
+export declare function createHTML(r: Runtime, { delegateEvents, functionBuilder }?: {
+    delegateEvents?: boolean;
+    functionBuilder?: (...args: string[]) => Function;
 }): HTMLTag;
 export {};

package.json

 {
   "name": "solid-js",
   "description": "A declarative JavaScript library for building user interfaces.",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "author": "Ryan Carniato",
@@ -6,0 +6,0 @@ "license": "MIT",

store/types/index.d.ts

@@ -6,3 +6,3 @@ export { $RAW, createStore, unwrap } from "./store.js";
 import { $NODE, isWrappable } from "./store.js";
-declare const DEV: {
+export declare const DEV: {
     readonly $NODE: typeof $NODE;
@@ -14,2 +14,1 @@ readonly isWrappable: typeof isWrappable;
 } | undefined;
-export { DEV };

types/index.d.ts

@@ -11,3 +11,3 @@ export { $DEVCOMP, $PROXY, $TRACK, batch, children, createComputed, createContext, createDeferred, createEffect, createMemo, createReaction, createRenderEffect, createResource, createRoot, createSelector, createSignal, enableExternalSource, enableScheduling, equalFn, getListener, getOwner, on, onCleanup, onError, catchError, onMount, runWithOwner, startTransition, untrack, useContext, useTransition } from "./reactive/signal.js";
 import { registerGraph, writeSignal } from "./reactive/signal.js";
-declare const DEV: {
+export declare const DEV: {
     readonly hooks: {
@@ -20,5 +20,4 @@ afterUpdate: (() => void) | null;
 } | undefined;
-export { DEV };
 declare global {
     var Solid$$: boolean;
 }

types/reactive/signal.d.ts

@@ -187,3 +187,5 @@ /**
 export declare function createEffect<Next>(fn: EffectFunction<undefined | NoInfer<Next>, Next>): void;
-export declare function createEffect<Next, Init = Next>(fn: EffectFunction<Init | Next, Next>, value: Init, options?: EffectOptions): void;
+export declare function createEffect<Next, Init = Next>(fn: EffectFunction<Init | Next, Next>, value: Init, options?: EffectOptions & {
+    render?: boolean;
+}): void;
 /**
@@ -190,0 +192,0 @@ * Creates a reactive computation that runs after the render phase with flexible tracking

web/dist/dev.js

@@ -577,3 +577,5 @@ import { createRoot, createRenderEffect, sharedConfig, untrack, enableHydration, getOwner, createEffect, runWithOwner, createSignal, onCleanup, splitProps, createMemo, $DEVCOMP } from 'solid-js';
   let content;
+  let hydrating = !!sharedConfig.context;
   createEffect(() => {
+    if (hydrating) getOwner().user = hydrating = false;
     content || (content = runWithOwner(owner, () => props.children));
@@ -602,2 +604,4 @@ const el = mount();
     }
+  }, undefined, {
+    render: !hydrating
   });
@@ -604,0 +608,0 @@ return marker;

web/dist/server.js

@@ -514,3 +514,3 @@ import { sharedConfig, createRoot, splitProps } from 'solid-js';
   for (let i = 0; i < keys.length; i++) {
-    const prop = keys[i];
+    let prop = keys[i];
     if (prop === "children") {
@@ -517,0 +517,0 @@ !skipChildren && console.warn(`SSR currently does not support spread children.`);

web/dist/web.js

@@ -577,3 +577,5 @@ import { createRoot, createRenderEffect, sharedConfig, untrack, enableHydration, getOwner, createEffect, runWithOwner, createSignal, onCleanup, splitProps, createMemo, $DEVCOMP } from 'solid-js';
   let content;
+  let hydrating = !!sharedConfig.context;
   createEffect(() => {
+    if (hydrating) getOwner().user = hydrating = false;
     content || (content = runWithOwner(owner, () => props.children));
@@ -602,2 +604,4 @@ const el = mount();
     }
+  }, undefined, {
+    render: !hydrating
   });
@@ -604,0 +608,0 @@ return marker;

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

Uses eval

Supply chain risk

Package uses eval() which is a dangerous function. This prevents the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

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

Uses eval

Supply chain risk

Package uses eval() which is a dangerous function. This prevents the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

791941

increased by0.6%

Lines of code

22025

increased by0.62%

No dependency changes