@erickmerchant/framework - npm Package Compare versions

Comparing version 42.2.1 to 43.0.0

create-dom-view.js

@@ -0,1 +1,3 @@
+import {tokenTypes} from './html.js'
+
 const svgNamespace = 'http://www.w3.org/2000/svg'
@@ -36,4 +38,4 @@
 
-  if (key.indexOf('on') === 0) {
-    const type = key.substring(2)
+  if (key.charAt(0) === '@') {
+    const type = key.substring(1)
 
@@ -88,3 +90,3 @@ const meta = readMeta(target)
 
-  if (next.text) {
+  if (next.type === tokenTypes.text) {
     if (!append && childNode.nodeType !== 3) {
@@ -141,6 +143,10 @@ replace = true
 
-      if (!isExistingElement || !isSameView || attribute.variable) {
+      if (
+        !isExistingElement ||
+        !isSameView ||
+        attribute.type === tokenTypes.variable
+      ) {
         let value = attribute.value
 
-        if (attribute.variable) {
+        if (attribute.type === tokenTypes.variable) {
           value = variables[value]
@@ -186,3 +192,3 @@ }
 
-      if (skip && !child.dynamic && !child.variable) {
+      if (skip && !child.dynamic && child.type !== tokenTypes.variable) {
         childNode = getNextSibling(childNode)
@@ -192,3 +198,3 @@ } else {
 
-        if (child.variable) {
+        if (child.type === tokenTypes.variable) {
           const variableValue = child.value
@@ -207,3 +213,3 @@
           if (grand == null || grand.type == null) {
-            grand = {text: true, value: grand == null ? '' : grand}
+            grand = {type: tokenTypes.text, value: grand == null ? '' : grand}
           }
@@ -210,0 +216,0 @@

html.js

@@ -13,3 +13,4 @@ const weakMap = new WeakMap()
   node: 5,
-  text: 6
+  text: 6,
+  constant: 7
 }
@@ -173,3 +174,3 @@
 
-const parse = (tokens, parent, tag) => {
+const parse = (tokens, parent, tag, variables) => {
   const child = {
@@ -196,18 +197,31 @@ tag,
       const next = tokens.next()?.value
+      let key = token.value
 
+      const firstChar = key.charAt(0)
+      const hasColon = ':' === firstChar
+      const hasAtSign = '@' === firstChar
+
+      if (hasColon) {
+        key = token.value.substring(1)
+      }
+
       if (next.type === tokenTypes.value) {
         child.attributes.push({
-          key: token.value,
-          variable: false,
+          type: tokenTypes.constant,
+          key,
           value: next.value
         })
+      } else if (!hasColon && !hasAtSign) {
+        child.attributes.push({
+          type: tokenTypes.constant,
+          key,
+          value: variables[next.value]
+        })
       } else {
-        const value = next.value
-
         child.dynamic |= 0b01
 
         child.attributes.push({
-          key: token.value,
-          variable: true,
-          value
+          type: tokenTypes.variable,
+          key,
+          value: next.value
         })
@@ -219,4 +233,4 @@ }
       child.attributes.push({
+        type: tokenTypes.variable,
         key: false,
-        variable: true,
         value: token.value
@@ -237,3 +251,3 @@ })
     } else if (token.type === tokenTypes.tag) {
-      const dynamic = parse(tokens, child, token.value) ? 0b10 : 0
+      const dynamic = parse(tokens, child, token.value, variables) ? 0b10 : 0
 
@@ -244,3 +258,2 @@ child.dynamic = child.dynamic | dynamic
         type: tokenTypes.text,
-        text: true,
         value: token.value
@@ -253,3 +266,2 @@ })
         type: tokenTypes.variable,
-        variable: true,
         value: token.value
@@ -267,3 +279,3 @@ })
 
-const toTemplate = (strs, vlength) => {
+const toTemplate = (strs, variables) => {
   const acc = {
@@ -273,3 +285,3 @@ tag: false
 
-  const tokens = tokenizer.get(acc, strs, vlength)
+  const tokens = tokenizer.get(acc, strs, variables.length)
 
@@ -286,3 +298,3 @@ const children = []
     if (token.type === tokenTypes.tag) {
-      parse(tokens, {children}, token.value)
+      parse(tokens, {children}, token.value, variables)
     } else if (token.type === tokenTypes.text && token.value.trim()) {
@@ -306,3 +318,3 @@ throw createAssertionError(token.type, "'node'")
   if (!result) {
-    result = toTemplate(strs, variables.length)
+    result = toTemplate(strs, variables)
 
@@ -309,0 +321,0 @@ weakMap.set(strs, result)

package.json

 {
   "name": "@erickmerchant/framework",
-  "version": "42.2.1",
+  "version": "43.0.0",
   "description": "A front-end framework.",
@@ -21,2 +21,3 @@ "homepage": "https://github.com/erickmerchant/framework#readme",
     "stringify.js",
+    "escape.js",
     "create-app.js",
@@ -23,0 +24,0 @@ "create-dom-view.js",

README.md

@@ -32,4 +32,4 @@ # @erickmerchant/framework
       <br />
-      <button type="button" onclick=${decrement}>--</button>
-      <button type="button" onclick=${increment}>++</button>
+      <button type="button" @click=${decrement}>--</button>
+      <button type="button" @click=${increment}>++</button>
     </div>
@@ -36,0 +36,0 @@ `

stringify.js

@@ -0,25 +1,4 @@
+import {escape} from './escape.js'
 import {tokenTypes} from './html.js'
 
-const escapeObj = {
-  '&': '&',
-  '<': '&lt;',
-  '>': '&gt;',
-  '"': '&quot;',
-  "'": '&#039;'
-}
-const escapeValuesArr = Object.values(escapeObj)
-const escapeKeysStr = Object.keys(escapeObj).join('')
-const escapeRegex = new RegExp(escapeKeysStr, 'g')
-
-const escape = (str) => {
-  try {
-    return str.replace(
-      escapeRegex,
-      (match) => escapeValuesArr[escapeKeysStr.indexOf(match)]
-    )
-  } catch {
-    return str
-  }
-}
-
 const selfClosing = [
@@ -52,12 +31,22 @@ 'area',
         if (attribute.key) {
-          if (attribute.key.startsWith('on')) continue
+          if (attribute.key.startsWith('@')) continue
 
+          const hasColon = attribute.key.startsWith(':')
+
+          if (hasColon) {
+            attribute.key = attribute.key.substring(1)
+          }
+
           yield attribute
         } else {
-          for (const [key, value] of Object.entries(
-            variables[attribute.value]
-          )) {
-            if (key.startsWith('on')) continue
+          for (let key of Object.keys(variables[attribute.value])) {
+            if (key.startsWith('@')) continue
 
-            yield {key, value}
+            const hasColon = key.startsWith(':')
+
+            if (hasColon) {
+              key = key.substring(1)
+            }
+
+            yield {key, value: variables[attribute.value][key]}
           }
@@ -72,3 +61,3 @@ }
 
-    if (attr.variable) {
+    if (attr.type === tokenTypes.variable) {
       value = variables[value]
@@ -75,0 +64,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

18918

increased by4.65%

Number of package files

9

increased by12.5%

Lines of code

600

increased by3.45%

No dependency changes