npm - @vindo/react - Versions diffs - 0.0.3 → 0.0.5 - Mend

@vindo/react 0.0.3 → 0.0.5

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/lib/client.js CHANGED Viewed

@@ -246,7 +246,19 @@ export function render({head, body}, chunk) {
   var head = ReactDom.createRoot(head)
   var body = ReactDom.createRoot(body)
+  /**
+   * Proxy handler
+   */
+  function getter(target, key) {
+    switch(key) {
+      case 'set':
+      case 'update':
+      case 'render':
+        return update
+    }
+    return target.data.state[key]
+  }
   /**
    * Re-render DOM
    */
@@ -274,18 +286,10 @@ export function render({head, body}, chunk) {
      * Reference for mouse event functions
      */
     chunk.refs = {
-      meta: args.meta,
       state: new Proxy(event, {
-        get(target, key) {
-          switch(key) {
-            case 'set':
-            case 'update':
-            case 'render':
-              return update
-          }
-          return target.data[key]
-        }
-      })
+        get: getter
+      }),
+      meta: args.meta,
     }
     /**
@@ -297,7 +301,7 @@ export function render({head, body}, chunk) {
     /**
      * Set only for dynamic content coming from server
      */
-    if(args.data.children) {
+    if(args.data && args.data.children) {
       args.data.children = transform(args.data.children, chunk)[0]
     }
     body.render(chunk.body(args))
@@ -312,8 +316,12 @@ export function render({head, body}, chunk) {
       path: new URL(location.href)
     })
   }
-  _http.get({type: 'hydrate'}).then(data => event.render(data))
+  /**
+   * Make sure the entire page has finished loading, including all dependent resources (images, scripts, CSS files, etc.).
+   */
+  window.onload = function onload() {
+    _http.get({type: 'hydrate'}).then(data => event.render(data))
+  }
 }

package/lib/server.js CHANGED Viewed

@@ -89,7 +89,20 @@ function dom(data) {
  * @param {object} html
  */
 function html(obj) {
-  return '<!DOCTYPE html>'.concat(ReactDom.renderToString(obj))
+  const str = ReactDom.renderToString(obj)
+  /**
+   * Capture unchanged charSet attribute
+   */
+  const charset = /(charSet)=("utf-8")/
+  /**
+   * renderToString() failed to convert JSX charSet attribute to lower case.
+   *
+   * We'll convert the charset to lowe case manually to avoid W3C validation errors and
+   * potential parsing issues for strict crawlers, impacting SEO.
+   */
+  return '<!DOCTYPE html>'.concat(
+    str.replace(charset, (_, g1, g2) => g1.toLowerCase().concat(`=${g2}`))
+  )
 }
@@ -101,12 +114,18 @@ function html(obj) {
 function head(children, {meta}) {
   const env = process.env
+  /**
+   * Show script only on development
+   */
   if(env.NODE_ENV == 'dev' || env.NODE_ENV == 'develop' || env.NODE_ENV == 'development') {
     children = children.concat(
       create('script', {key: 0, src: env.DEV_SERVER}
     ))
   }
+  /**
+   * Inject bundle script by default. It can be disabled using meta.bundle = false
+   */
   return children.concat(
     meta.bundle && create('script', {
       key: 1,
@@ -127,6 +146,9 @@ function body(children, data) {
   if(!isArr(children)) {
     children = [children]
   }
+  /**
+   * Add meta data
+   */
   return children.map((child, key) => clone(child, {key, ...data}))
 }
@@ -149,7 +171,9 @@ function reducer(children) {
     if(!props) {
       return
     }
+    /**
+     * Component function
+     */
     if(isFunc(type)) {
       if(/^default_1/.test(type.name)) {
         throw new ReferenceError(`Component function requires a name. Currently have a default name of '${type.name}'.`)
@@ -182,7 +206,7 @@ function reducer(children) {
       if(isFunc(v)) {
         var f = v.toString()
         var m = [
-          ...f.matchAll(/\((.*)\)(\s{|{)((.|\n)*)\}/g)
+          ...f.matchAll(/\((.*)\)(\s{|\s=>\s{|{)((.|\n)*)\}/g)
         ][0]
         p[i] = {
           name: i,
@@ -257,7 +281,7 @@ function HTTPState(req, events) {
   state.on = function on(name, cb) {
     events.on(mkId(name, req.name), async function(data) {
-      if(!cb) {
+      if(typeof cb !== 'function') {
         throw new ReferenceError('Callback function is required.')
       }
       return await cb(data)
@@ -386,7 +410,7 @@ exports.server = function server() {
   }
-  return function(req, res, next, {meta, events, exception}) {
+  return function(req, res, next, {meta, events}) {
     const state = HTTPState(req, events)
     const store = persist(state.type, req.body)
     /**
@@ -416,36 +440,29 @@ exports.server = function server() {
      * Render on first request
      */
     events.on('__render', function(comp) {
-      if(isValid(comp)) {
-        var args = prepare(comp, {
-          meta,
-          store,
-          state: state.data,
-        })
-        /**
-         * Initial content
-         */
-        if(state.type == 'initial') {
-          data[manif.hash] = args.data
-        }
-        /**
-         * Update content
-         */
-        if(state.type == 'route' || state.type == 'update' || state.type == 'store') {
-          return dispatch(args.data)
-        }
-        /**
-         * If the request not matched.
-         */
-        const errors = Object.keys(exception.statuses).concat('error')
-        if(args.name && req.name) {
-          if(req.route.back && args.name !== req.name && !errors.includes(args.name)) {
-            return
-          }
-        }
-        return args
+      if(!isValid(comp)) {
+        return
+      }
+      var args = prepare(comp, {
+        meta,
+        store,
+        state: state.data,
+      })
+      /**
+       * Initial content
+       */
+      if(state.type == 'initial') {
+        data[manif.hash] = args.data
+      }
+      /**
+       * Update content
+       */
+      if(state.type == 'route' || state.type == 'update' || state.type == 'store') {
+        return dispatch(args.data)
       }
+      return args
     })
     if(req.is(manif.hash)) {

package/lib/util.js CHANGED Viewed

@@ -6,33 +6,33 @@ export const merge = Object.assign
 export const isArr = Array.isArray
 export function isEmpty(obj) {
   if(obj && Object.keys(obj).length == 0) {
     return true
   }
   return false
 }
 export function isMore(val) {
   return isObj(val) || val == undefined ? 'jsx' : 'jsxs'
 }
 export function isNum(val) {
   return val && typeof val === 'number' && {}.toString.call(val) === '[object Number]'
 }
 export function isStr(val) {
   return val && typeof val === 'string' && {}.toString.call(val) === '[object String]'
 }
 export function isFunc(val) {
   return val && typeof val === 'function' && {}.toString.call(val) === '[object Function]'
 }
 export function isObj(val) {
   return val && typeof val === 'object' && val.constructor === Object && Object.prototype === Object.getPrototypeOf(val)
 }
+/**
+ * Create function
+ */
 export function toFunc(name, {code, args = [], refs}) {
   var arr = ['return', 'function', name]
@@ -66,7 +66,12 @@ export function transform(children, data) {
       return
     }
     if(isArr(type)) {
-      type = data[type[0]]
+      const key = type[0]
+      type = data[key]
+      if(!type) {
+        throw TypeError(`Cannot read property '${key}'.`)
+      }
     }
     for(var i in props) {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@vindo/react",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "React SSR for @vindo/core framework.",
   "main": "./index.js",
   "types": "./index.d.ts",
@@ -22,18 +22,10 @@
     "react-dom": "*"
   },
   "exports": {
-    ".": {
-      "default": "./index.js"
-    },
-    "./util": {
-      "default": "./lib/util.js"
-    },
-    "./client": {
-      "default": "./lib/client.js"
-    },
-    "./request": {
-      "default": "./lib/request.js"
-    }
+    ".": "./index.js",
+    "./util": "./lib/util.js",
+    "./client": "./lib/client.js",
+    "./request": "./lib/request.js"
   },
   "author": "Ruel Mindo",
   "license": "MIT",