npm - @srfnstack/fntags - Versions diffs - 0.3.3 → 0.3.7 - Mend

@srfnstack/fntags 0.3.3 → 0.3.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/README.md CHANGED Viewed

@@ -1,7 +1,90 @@
-# fntags
+<p align="center">
+  <img alt="fntags header" src="https://raw.githubusercontent.com/SRFNStack/fntags/master/docs/fntags_header.gif">
+</p>
-> not your usual f'n framework
+---
-### [Documentation](https://srfnstack.github.io/fntags)
+## What the f?
+fntags primary goal is to make the developer experience pleasant while providing high performance and neato features.
-Check the docs to get started.
+- No dependencies and no build tools
+  <br> - Import the framework directly from your favorite cdn and start building.
+- Everything is javascript
+  <br> - There's no special templating language to learn, and you won't be writing html. <br> - This removes the template+functionality duality and helps keep you focused by removing context switching.
+- Real DOM elements
+  <br> - Every element is a real dom element, there's no virtual dom and no wrapper objects.
+- It's familiar
+  <br> - fntags was inspired by React, and the state management is similar to react hooks.
+- [State binding is explicit and granular](https://srfnstack.github.io/fntags/state#Binding%20State)
+  <br> - Bind only the text of an element, an attribute, or a style. You control the binding, replace as much or as little as you want.
+- State exists without components
+  <br> - This allows app wide states to be maintained using export/import and removes the need for complex state management like redux.
+- [Dynamic routing](https://srfnstack.github.io/fntags/routing#Dynamic%20Path%20Based%20Routing%3A%20modRouter)
+  <br> - The modRouter only loads the files required by each route and doesn't require bundling.
+  <br> - Bye bye fat bundles, hello highly cacheable routes.
+- [Async Rendering](https://srfnstack.github.io/fntags/components#Async%20Rendering)
+  <br> - fntags will resolve promises that are passed to element functions, no special handling required.
+## [Documentation](https://srfnstack.github.io/fntags)
+Check out the [documentation](https://srfnstack.github.io/fntags) to learn more!
+### f'n examples
+<hr>
+Components are plain functions
+```javascript
+import { div } from 'https://cdn.jsdelivr.net/npm/@srfnstack/fntags@0.3.3/src/fnelements.min.mjs'
+const hello = name => div('Hello ', name)
+document.body.append( hello('world!') )
+```
+Two-way binding is a breeze with the bind functions provided by fnstate objects.
+```javascript
+import { fnstate } from 'https://cdn.jsdelivr.net/npm/@srfnstack/fntags@0.3.3/src/fntags.min.mjs'
+import { div, input, br } from 'https://cdn.jsdelivr.net/npm/@srfnstack/fntags@0.3.3/src/fnelements.min.mjs'
+export const userName = fnstate('world')
+export const appColor = fnstate('MediumTurquoise')
+document.body.append(
+  div( { style: { color: appColor.bindStyle() } },
+    'Hello ', userName.bindAs(), '!'
+  ),
+  br(),
+  input({
+    value: userName.bindAttr(),
+    oninput: e => userName(e.target.value)
+  }),
+  br(),
+  input({
+    value: appColor.bindAttr(),
+    oninput: e => appColor(e.target.value)
+  }),
+)
+```
+### Required HTML
+Unfortunately browsers lack the ability to render a js file directly, and thus you still need a tiny bit of html to bootstrap your app.
+Here's an example of the only html you need to write for your entire application.
+Now that these two lines are there you're set to write sweet sweet es6+ and no more html.
+```html
+<html><body><script type="module">
+import { div } from 'https://cdn.jsdelivr.net/npm/@srfnstack/fntags@0.3.3/src/fnelements.min.mjs'
+document.body.append(div('hello world!'))
+</script></body></html>
+```
+### Benchmark
+Check the latest benchmark results in the widely used [JS Web Frameworks Benchmark](https://krausest.github.io/js-framework-benchmark/current.html)!

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@srfnstack/fntags",
-  "version": "0.3.3",
+  "version": "0.3.7",
   "author": "Robert Kempton <r@snow87.com>",
   "private": false,
   "homepage": "https://github.com/srfnstack/fntags",
@@ -30,7 +30,8 @@
     "state-management"
   ],
   "devDependencies": {
-    "cypress": "^6.8.0",
+    "cypress": "^9.2.0",
+    "pre-commit": "^1.2.2",
     "standard": "^16.0.4"
   },
   "scripts": {
@@ -38,5 +39,9 @@
     "cypress": "cypress run --spec test/** -b chrome",
     "lint": "standard --env browser src && standard --env browser --env jest --global Prism --global cy test docs",
     "lint:fix": "standard --env browser --fix src && standard --env browser --env jest --global Prism --global cy --fix test docs"
-  }
+  },
+  "pre-commit": [
+    "lint",
+    "test"
+  ]
 }

package/src/fnroute.mjs CHANGED Viewed

@@ -104,7 +104,12 @@ export const modRouter = ({ routePath, attrs, onerror, frame, sendRawPath, forma
     }
     const filePath = path ? routePath + ensureOnlyLeadingSlash(path) : routePath
-    const p = moduleCache[filePath] ? Promise.resolve(moduleCache[filePath]) : import(filePath).then(m => { moduleCache[filePath] = m })
+    const p = moduleCache[filePath]
+      ? Promise.resolve(moduleCache[filePath])
+      : import(filePath).then(m => {
+        moduleCache[filePath] = m
+        return m
+      })
     p.then(module => {
       const route = module.default

package/src/fntags.mjs CHANGED Viewed

@@ -21,7 +21,7 @@ export function h (tag, ...children) {
   let firstChildIdx = 0
   let element
   if (tag.startsWith('ns=')) {
-    element = document.createElementNS(...( tag.slice(3).split('|') ))
+    element = document.createElementNS(...(tag.slice(3).split('|')))
   } else {
     element = document.createElement(tag)
   }
@@ -52,11 +52,11 @@ export function h (tag, ...children) {
  *
  * This allows fast rendering by pre-creating a dom element with the entire template structure then cloning and populating
  * the clone with data from the provided context. This avoids the work of having to re-execute the tag functions
- * one by one and can speed up situations where the a similar element is created many times.
+ * one by one and can speed up situations where a similar element is created many times.
  *
  * You cannot bind state to the initial template. If you attempt to, the state will be read, but the elements will
  * not be updated when the state changes because they will not be bound to the cloned element.
- * Thus, all state bindings must be passed in the context to the compiled template to work correctly.
+ * All state bindings must be passed in the context to the compiled template to work correctly.
  * @param templateFn {function(object): Node}
  * @return {function(*): Node}
  */
@@ -136,12 +136,13 @@ export const fnstate = (initialValue, mapKey) => {
     nextId: 0,
     mapKey,
     state (newState) {
-      if (arguments.length === 0 || ( arguments.length === 1 && arguments[0] === ctx.state )) {
+      if (arguments.length === 0 || (arguments.length === 1 && arguments[0] === ctx.state)) {
         return ctx.currentValue
       } else {
+        const oldState = ctx.currentValue
         ctx.currentValue = newState
         for (const observer of ctx.observers) {
-          observer.fn(newState)
+          observer.fn(newState, oldState)
         }
       }
       return newState
@@ -168,6 +169,16 @@ export const fnstate = (initialValue, mapKey) => {
    */
   ctx.state.bindAs = (element, update) => doBindAs(ctx, element ?? ctx.state, update)
+  /**
+   * Bind a property of an object stored in this state as a simple value.
+   *
+   * Shortcut for `mystate.bindAs((current)=> current[prop])`
+   *
+   * @param {string} prop The object property to bind as
+   * @returns {(HTMLDivElement|Text)[]|HTMLDivElement|Text}
+   */
+  ctx.state.bindProp = (prop) => doBindAs(ctx, (st) => st[prop])
   /**
    * Bind attribute values to state changes
    * @param [attribute] A function that returns an attribute value. If not passed, defaults to the state's value
@@ -312,6 +323,7 @@ function createBoundAttr (attr) {
   if (typeof attr !== 'function') {
     throw new Error('You must pass a function to bindAttr')
   }
+  // wrap the function to avoid modifying it
   const boundAttr = () => attr()
   boundAttr.isBoundAttribute = true
   return boundAttr
@@ -370,7 +382,7 @@ function doBindChildren (ctx, parent, element, update) {
   }
   ctx.currentValue = ctx.currentValue.map(v => v.isFnState ? v : fnstate(v))
   ctx.bindContexts.push({ element, update, parent })
-  ctx.state.subscribe(() => {
+  ctx.state.subscribe((newState, oldState) => {
     if (!Array.isArray(ctx.currentValue)) {
       console.warn('A state used with bindChildren was updated to a non array value. This will be converted to an array of 1 and the state will be updated.')
       new Promise((resolve) => {
@@ -384,7 +396,7 @@ function doBindChildren (ctx, parent, element, update) {
         throw e
       })
     } else {
-      reconcile(ctx)
+      reconcile(ctx, oldState)
     }
   })
   reconcile(ctx)
@@ -456,12 +468,12 @@ const doBindAs = (ctx, element, update) =>
 /**
  * Reconcile the state of the current array value with the state of the bound elements
  */
-function reconcile (ctx) {
+function reconcile (ctx, oldState) {
   for (const bindContext of ctx.bindContexts) {
     if (bindContext.boundElementByKey === undefined) {
       bindContext.boundElementByKey = {}
     }
-    arrangeElements(ctx, bindContext)
+    arrangeElements(ctx, bindContext, oldState)
   }
 }
@@ -475,7 +487,7 @@ function keyMapper (mapKey, value) {
   }
 }
-function arrangeElements (ctx, bindContext) {
+function arrangeElements (ctx, bindContext, oldState) {
   if (ctx.currentValue.length === 0) {
     bindContext.parent.textContent = ''
     bindContext.boundElementByKey = {}
@@ -492,7 +504,8 @@ function arrangeElements (ctx, bindContext) {
     }
     const key = keyMapper(ctx.mapKey, valueState())
     if (keys[key]) {
-      throw new Error('Duplicate keys in a bound array are not allowed.')
+      if (oldState) ctx.state(oldState)
+      throw new Error('Duplicate keys in a bound array are not allowed, state reset to previous value.')
     }
     keys[key] = i
     keysArr[i] = key
@@ -649,7 +662,7 @@ const setAttribute = function (attrName, attr, element) {
       setStyle(style, attr[style], element)
     }
   } else if (attrName === 'class') {
-    //special handling for class to ensure the selector classes from fntemplate don't get overwritten
+    // special handling for class to ensure the selector classes from fntemplate don't get overwritten
     if (element.__fnselector && element.className) {
       element.className += ` ${attr}`
     } else {
@@ -663,7 +676,7 @@ const setAttribute = function (attrName, attr, element) {
     element[attrName] = !!attr
   } else {
     if (attrName.startsWith('ns=')) {
-      element.setAttributeNS(...( attrName.slice(3).split('|') ), attr)
+      element.setAttributeNS(...(attrName.slice(3).split('|')), attr)
     } else {
       element.setAttribute(attrName, attr)
     }
@@ -703,9 +716,18 @@ export const getAttrs = (children) => Array.isArray(children) && isAttrs(childre
 export const styled = (style, tag, children) => {
   const firstChild = children[0]
   if (isAttrs(firstChild)) {
-    children[0].style = Object.assign(style, firstChild.style)
+    if (typeof firstChild.style === 'string') {
+      firstChild.style = [stringifyStyle(style), stringifyStyle(firstChild.style)].join(';')
+    } else {
+      firstChild.style = Object.assign(style, firstChild.style)
+    }
   } else {
     children.unshift({ style })
   }
   return h(tag, ...children)
 }
+const stringifyStyle = style =>
+  typeof style === 'string'
+    ? style
+    : Object.keys(style).map(prop => `${prop}:${style[prop]}`).join(';')