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

@vindo/react 0.0.1 → 0.0.3

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 (9) hide show

package/README.md CHANGED Viewed

@@ -1,12 +1,12 @@
-## Cross-origin (CORS)
-Resource sharing restriction for Web and API
+## React SSR
+React server side rendering for @vindo/core framework
 ## Installation
 ```
-npm install @vindo/cors
+npm install @vindo/react
 ```
 Or
 ```
-yarn add @vindo/cors
+yarn add @vindo/react
 ```

package/index.d.ts CHANGED Viewed

@@ -1,14 +1,25 @@
 declare module '@vindo/react' {
-  export const HTTPResponse: {
-    get(cb:Function): void
-    post(cb:Function): void
-  }
   export function server(): Function;
 }
+declare module '@vindo/react/request'
 declare module '@vindo/react/client' {
-  export const http:any;
-  export function View(props): any;
-  export function Hydrate(props): any;
-  export function HydrateContent(props): any;
+  type DataType = {
+    [key:string]: string | number | boolean
+  }
+  type HeaderType = {
+    [key:string]: string
+  }
+  export const http: {
+    set(args:{data?: DataType, path?: string}): Promise<object>
+    get(...args:any): Promise<object>
+    post(...args:any): Promise<object>
+  }
+  export function useStore(name?:string): any
+  export function useState(state?:{[key:string]: any}): any
+  export function useContext(): any
+  export function Link(props:any): any
+  export function View(props:any): any
+  export function Content(props:any): any
+  export function Provider(props:any): any
 }

package/index.js CHANGED Viewed

@@ -1,224 +1,7 @@
 /*
  * @vindo/react
- * Copyright(c) 2025 Ruel Mindo
+ * Copyright(c) 2023 Ruel Mindo
  * MIT Licensed
  */
-'use strict'
-const path = require('node:path')
-const React = require('node_modules/react')
-const ReactDom = require('node_modules/react-dom/server')
-/**
- * Shorthand
- */
-const map = React.Children.map
-const clone = React.cloneElement
-const create = React.createElement
-const isValid = React.isValidElement
-var data = {}
-var index = require(path.resolve('src/react'))
-if(index.default) {
-  index = index.default
-}
-/**
- * Set data
- * @param {object} el
- * @param {object} meta
- */
-function set(el, meta) {
-  const {children: content, ...props} = el.props
-  /**
-   * Use id if no name provided
-   */
-  var name = props.name ?? props.id
-  var opt = {
-    name,
-    meta: {name, ...meta}
-  }
-  switch(el.type.name) {
-    case 'View':
-      Object.assign(opt, {bundle: true, content: content ?? props})
-    break
-    default:
-      Object.assign(opt, {bundle: false, content: el})
-  }
-  function children(item) {
-    var children = item.props.children
-    if(item.type == 'head') {
-      children = head(children, opt)
-    }
-    if(item.type == 'body') {
-      children = body(children, opt)
-    }
-    return clone(item, item.props, children)
-  }
-  const app = index({name, content: opt.content, ...meta})
-  return {
-    name,
-    html: html(
-      clone(app, {}, map(app.props.children, children))
-    )
-  }
-}
-/**
- * Set data to first level of children function
- * @param {array} children
- * @param {object} data
- */
-function inherit(children, data) {
-  return children.map((child, key) => {
-    if(typeof child.type == 'function') {
-      child = child.type({...child.props, data, meta: data.meta})
-    }
-    return clone(child, {key})
-  })
-}
-/**
- * Set DOCTYPE
- * @param {object} html
- */
-function html(obj) {
-  return '<!DOCTYPE html>'.concat(ReactDom.renderToString(obj))
-}
-/**
- * Add a bundle script to head
- * @param children
- * @param args
- */
-function head(children, args) {
-  const env = process.env
-  if(!args.bundle) {
-    return children
-  }
-  const queries = new URLSearchParams({
-    hash: env.UUID,
-    name: args.name,
-    port: (env.NODE_ENV == 'dev' || env.NODE_ENV == 'develop' || env.NODE_ENV == 'development') && env.DEV_SERVER_PORT
-  })
-  return children.concat(
-    create('script', {
-      key: 0,
-      id: 'bundle',
-      type: 'module',
-      src: '/bundle.js?'.concat(queries.toString())
-    })
-  )
-}
-/**
- * Set meta data to children
- * @param {array} children
- * @param {object} args
- */
-function body(children, args) {
-  if(typeof children.type == 'function') {
-    const type = children.type(args)
-    if(!type) {
-      return
-    }
-    if(type.props.children) {
-      children = type.props.children
-    }
-  }
-  data[args.name] = inherit(children, args)
-  return data[args.name]
-}
-/**
- * Client fetch response
- *
- * @param {object} req
- * @param {object} res
- */
-function HTTPResponse(req, res) {
-  const token = req.get('x-fetch-request-token')
-  const response = function(data) {
-    if(token) {
-      res.json(data, 200, {'X-Fetch-Response': token})
-    }
-  }
-  return {
-    get(cb) {
-      if(req.method == 'GET')
-        response(cb(req.query))
-    },
-    post(cb) {
-      if(req.method == 'POST')
-        response(cb(req.body))
-    }
-  }
-}
-/**
- * Middleware
- */
-exports.server = function server() {
-  return function(req, res, next, {env, meta, events, exception}) {
-    exports.HTTPResponse = HTTPResponse(req, res)
-    /**
-     * JSX object
-     */
-    if(req.is(env.UUID)) {
-      data = res.json(data[req.query.name]) ?? {}
-      return
-    }
-    events.on('render', function(component) {
-      if(req.get('x-fetch-request-token')) {
-        return
-      }
-      if(isValid(component)) {
-        var data = set(component, meta)
-        if(!data) {
-          return
-        }
-        /**
-         * Return nothing if the request not matched with the component.
-         */
-        const errors = Object.keys(exception.statuses).concat('error')
-        if(data.name && req.name) {
-          if(req.route.back && data.name !== req.name && !errors.includes(data.name)) {
-            return
-          }
-        }
-        return data
-      }
-    })
-    next()
-  }
-}
+module.exports = require('./lib/server')

package/lib/client.js ADDED Viewed

@@ -0,0 +1,320 @@
+/*
+ * @vindo/react
+ * Copyright(c) 2025 Ruel Mindo
+ * MIT Licensed
+ */
+'use strict'
+import React from 'react'
+import ReactDom from 'react-dom/client'
+import {request, HTTPRequest} from '@vindo/react/request'
+import {isObj, isFunc, merge, transform} from '@vindo/react/util'
+const event = {
+  data: {
+    state: {}
+  },
+  updating: false
+}
+const _http = HTTPRequest()
+const _context = React.createContext({})
+/**
+ * Update DOM
+ */
+function update({path, type, ...data}, opts = {}) {
+  const args = {
+    type: type ?? 'update',
+    path,
+    data: merge(event.data.state, data)
+  }
+  request(args, opts).then((data) => event.render(data, type))
+}
+/**
+ * Use state
+ */
+export function useState(initialState = {}) {
+  if(!isObj(initialState)) {
+    throw Error('Custom state hook only allow object as parameter.')
+  }
+  const ref = React.useRef({})
+  const [state, setState] = React.useState(initialState)
+  merge(ref.current, state)
+  return new Proxy({
+    async set(state = {}) {
+      event.updating = false
+      /**
+       * Merge the value of its argument if the function (set) have more than 1 state as arguments
+       */
+      if(arguments.length > 1) {
+        merge(state, ...arguments)
+      }
+      if(isObj(state)) {
+        setState(state)
+      }
+      if(isFunc(state)) {
+        const dataState = state(ref.current)
+        if(dataState) {
+          if(dataState instanceof Promise) {
+            setState(await dataState)
+          }
+          else {
+            setState(dataState)
+          }
+        }
+      }
+    },
+    /**
+     * Send GET request to the server
+     */
+    get(data) {
+      if(isObj(data)) {
+        return _http.get({data})
+      }
+      if(isFunc(data)) {
+        return _http.get({}).then(data)
+      }
+    },
+    /**
+     * Send POST request to the server
+     */
+    post(data) {
+      if(isObj(data)) {
+        return _http.post({data})
+      }
+      if(isFunc(data)) {
+        return _http.post({}).then(data)
+      }
+    },
+    /**
+     * Re-render DOM with new global state
+     */
+    update(data = {}) {
+      /**
+       * Merge the value of its argument if the function (set) have more than 1 state as arguments
+       */
+      if(arguments.length > 1) {
+        merge(data, ...arguments)
+      }
+      event.update(data)
+    },
+  },
+  {
+    get(target, key) {
+      if(target[key]) {
+        return target[key]
+      }
+      if(event.updating) {
+        merge(ref.current, event.data.state)
+      }
+      return ref.current[key]
+    }
+  })
+}
+/**
+ * Context
+ */
+export function useStore() {
+  const store = useContext('store')
+  function dispatch(data) {
+    const args = {
+      data,
+      type: 'store',
+    }
+    request(args, {method: 'POST'}).then((data) => event.render(data))
+  }
+  const proto = {
+    clear() {
+      dispatch({action: 'clear'})
+    },
+    remove(name) {
+      dispatch({action: 'remove', data: name})
+    },
+    dispatch(data) {
+      dispatch({action: 'add', data})
+    }
+  }
+  return merge(Object.create(proto), store)
+}
+/**
+ * Context
+ */
+export function useContext(name = null) {
+  const {meta, data, state, store} = React.useContext(_context)
+  switch(name) {
+    case 'store':
+      return store
+    case 'content':
+      return {data, name: meta.name}
+    default:
+      return {meta, state}
+  }
+}
+/**
+ * Wrapper
+ */
+export function Provider({children, ...value}) {
+  return React.createElement(_context, {value}, children)
+}
+/**
+ * Link
+ */
+export function Link({href, text, disabled, children}) {
+  if(!href) {
+    throw new ReferenceError(`Props 'href' is missing.`)
+  }
+  const onClick = (e) => {
+    if(disabled || location.pathname == href) {
+      return
+    }
+    e.preventDefault()
+    update({
+      type: 'route',
+      path: new URL(href, location.origin)
+    })
+    history.pushState({}, text, href)
+  }
+  if(!children) {
+    children = text
+  }
+  return React.createElement('a', {href, onClick}, children)
+}
+/**
+ * Component Holder
+ */
+export function View() {}
+/**
+ * Find current route
+ */
+export function Content(props) {
+  const {data, name} = useContext('content')
+  /**
+   * View content coming from backend component (src/http)
+   */
+  if(React.isValidElement(data.children)) {
+    return data.children
+  }
+  /**
+   * View content coming from react directory (src/react)
+   */
+  return React.Children.map(props.children, (child) => {
+    if(!child.props.name) {
+      throw new ReferenceError(`Props 'name' is required for View component.`)
+    }
+    if(name == child.props.name) {
+      return child.props.component(data.props)
+    }
+  })
+}
+/**
+ * Render react dom to root
+ * @param {object} document
+ * @param {object} chunk
+ */
+export function render({head, body}, chunk) {
+  var head = ReactDom.createRoot(head)
+  var body = ReactDom.createRoot(body)
+  /**
+   * Re-render DOM
+   */
+  event.update = function update(state) {
+    merge(
+      event.data.state,
+      state
+    )
+    event.render(event.data)
+  }
+  /**
+   * Render content
+   */
+  event.render = function render(args, type = null) {
+    /**
+     * Set data
+     */
+    event.data = args
+    /**
+     * Updating content
+     */
+    event.updating = true
+    /**
+     * 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]
+        }
+      })
+    }
+    /**
+     * For route request only
+     */
+    if(type == 'route') {
+      head.render(chunk.head(args.meta))
+    }
+    /**
+     * Set only for dynamic content coming from server
+     */
+    if(args.data.children) {
+      args.data.children = transform(args.data.children, chunk)[0]
+    }
+    body.render(chunk.body(args))
+  }
+  /**
+   * Update when back/forward button is pressed
+   */
+  window.onpopstate = function onpopstate() {
+    update({
+      type: 'route',
+      path: new URL(location.href)
+    })
+  }
+  _http.get({type: 'hydrate'}).then(data => event.render(data))
+}
+export default {render}

package/lib/request.js ADDED Viewed

@@ -0,0 +1,127 @@
+/*
+ * @vindo/react
+ * Copyright(c) 2025 Ruel Mindo
+ * MIT Licensed
+ */
+'use strict'
+const requestTypes = [
+  'store',
+  'fetch',
+  'route',
+  'update',
+  'hydrate',
+]
+/**
+ * Get name
+ * @param {string} pathname
+ */
+function name(pathname) {
+  const name = pathname.split('/').at(-1)
+  if(name) {
+    return name
+  }
+}
+/**
+ * Get pagename
+ * @param {string} type
+ * @param {object} path
+ */
+function page(type, path) {
+  var base
+  switch(type) {
+    case 'route':
+      base = name(path.pathname)
+      break
+    default:
+      base = name(location.pathname)
+  }
+  return base ?? 'root'
+}
+/**
+ * Get hash to create new url
+ */
+function getURL() {
+  var src = new URL(document.scripts.bundle.src)
+  var name = src.pathname.match(/^\/bundle-(.*)\.js$/)
+  if(name) {
+    return new URL(name[1], location.origin)
+  }
+}
+/**
+ * HTTP Request
+ */
+export function HTTPRequest() {
+  const http = Object.defineProperties({}, {
+    get: {
+      value: function get(args = {}) {
+        return request({type: 'fetch', ...args, path: getURL()}, {method: 'GET'})
+      },
+      writable: false
+    },
+    post: {
+      value: function post(args = {}) {
+        return request({type: 'fetch', ...args, path: getURL()}, {method: 'POST'})
+      },
+      writable: false
+    },
+  })
+  return http
+}
+/**
+ * State request
+ */
+export function request({data, path, type, ...args}, opts = {}) {
+  if(data && typeof data !== 'object') {
+    throw new TypeError(`Invalid type of 'data'. Expected value of type 'object' but got ${typeof data}'.`)
+  }
+  if(!requestTypes.includes(type)) {
+    throw new ReferenceError(`Invalid request type.`)
+  }
+  var opts = {
+    method: 'GET',
+    ...opts,
+    headers: Object.assign(opts.headers ?? {}, {
+      'X-State-Request': btoa(
+        JSON.stringify({
+          type,
+          page: page(type, path)
+        })
+      ),
+    })
+  }
+  if(!data) {
+    data = args
+  }
+  if(!path) {
+    path = new URL(location.href)
+  }
+  if(opts.method == 'GET') {
+    if(data) {
+      for(var i in data) {
+        path.searchParams.append(i, data[i])
+      }
+    }
+  }
+  if(opts.method == 'POST') {
+    opts.body = JSON.stringify(data)
+    opts.headers['Content-Type'] = 'application/json'
+  }
+  return fetch(path, opts).then((res) => res.json())
+}

package/lib/server.js ADDED Viewed

@@ -0,0 +1,457 @@
+/*
+ * @vindo/react
+ * Copyright(c) 2025 Ruel Mindo
+ * MIT Licensed
+ */
+'use strict'
+const path = require('path')
+const React = require('react')
+const config = require('@vindo/core/config')
+const ReactDom = require('react-dom/server')
+const {isObj, isArr, isStr, isNum, isFunc, merge} = require('@vindo/react/util')
+/**
+ * Shorthand
+ */
+const clone = React.cloneElement
+const create = React.createElement
+const isValid = React.isValidElement
+var build = config.get('buildOption')
+var manif = require(path.resolve(build.output, 'manifest.json'))
+/**
+ * Create HTTP state event ID
+ * @param {string} prefix
+ * @param {string} name
+ */
+function mkId(prefix, name) {
+  if(!name) {
+    name = 'root'
+  }
+  return encode(prefix.concat(name)).replace(/=/, '')
+}
+/**
+ * Encode string to base64
+ * @param {string} string
+ */
+function encode(string) {
+  return Buffer.from(string).toString('base64')
+}
+/**
+ * Decode base64 string
+ * @param {string} string
+ */
+function decode(string) {
+  return JSON.parse(
+    Buffer.from(string, 'base64').toString('utf8')
+  )
+}
+/**
+ * Require main component from react directory
+ * @param {string} point
+ * @param {object} data
+ */
+function entry(data) {
+  const app = require(path.resolve(path.dirname(build.entry)))
+  if(app) {
+    return app.default(data)
+  }
+}
+/**
+ * React DOM
+ * @param {object} data
+ */
+function dom(data) {
+  return (item, key) => {
+    if(item.type == 'head') {
+      return clone(item, {key}, head(item.props.children, data))
+    }
+    if(item.type == 'body') {
+      return clone(item, {key}, body(item.props.children, data))
+    }
+  }
+}
+/**
+ * Set DOCTYPE
+ * @param {object} html
+ */
+function html(obj) {
+  return '<!DOCTYPE html>'.concat(ReactDom.renderToString(obj))
+}
+/**
+ * Add a bundle script to head
+ * @param children
+ * @param args
+ */
+function head(children, {meta}) {
+  const env = process.env
+  if(env.NODE_ENV == 'dev' || env.NODE_ENV == 'develop' || env.NODE_ENV == 'development') {
+    children = children.concat(
+      create('script', {key: 0, src: env.DEV_SERVER}
+    ))
+  }
+  return children.concat(
+    meta.bundle && create('script', {
+      key: 1,
+      id: 'bundle',
+      type: 'module',
+      src: manif.bundle
+    })
+  )
+}
+/**
+ * Set meta data to children
+ * @param {array} children
+ * @param {object} args
+ */
+function body(children, data) {
+  if(!isArr(children)) {
+    children = [children]
+  }
+  return children.map((child, key) => clone(child, {key, ...data}))
+}
+/**
+ * Reduce object to necessary props
+ * @param {array|object} children
+ */
+function reducer(children) {
+  if(!children) {
+    return []
+  }
+  if(!isArr(children)) {
+    children = [children]
+  }
+	return children.map(({type, props}) => {
+    var p = {}
+    if(!props) {
+      return
+    }
+    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}'.`)
+      }
+      type = [type.name]
+    }
+    for(var i in props) {
+      var v = props[i]
+      if(isStr(v) || isNum(v)) {
+        p[i] = v
+      }
+      if(isArr(v)) {
+        p.children = v.map((v) => {
+          if(isObj(v)) {
+            return reducer(v)[0]
+          }
+          return v
+        })
+      }
+      if(isObj(v)) {
+        if(i == 'style') {
+          p.style = v
+        }
+        if(i == 'children') {
+          p.children = reducer(v)
+        }
+      }
+      if(isFunc(v)) {
+        var f = v.toString()
+        var m = [
+          ...f.matchAll(/\((.*)\)(\s{|{)((.|\n)*)\}/g)
+        ][0]
+        p[i] = {
+          name: i,
+          mouseevent: true,
+          code: m[3].trim(),
+          args: m[1].split(',').filter(v => v),
+          refs: ['state','meta']
+        }
+      }
+    }
+    return {type, props: p}
+	})
+}
+/**
+ * Reduce to fewer object props before sending to client
+ *
+ * @param {string} name
+ */
+function reduce(args) {
+  if(!args) {
+    return
+  }
+  const {children} = args.data
+  if(children) {
+    args.data.children = reducer(children)[0]
+  }
+  return args
+}
+/**
+ * Get state
+ * @param {object} req
+ */
+function getState(req) {
+  const state = {
+    data: {},
+    type: 'initial',
+  }
+  var token = req.get('x-state-request')
+  if(token) {
+    merge(state, decode(token))
+  }
+  if(state.type == 'fetch' || state.type == 'update') {
+    if(req.method == 'GET') {
+      merge(state.data, req.query)
+    }
+    if(req.method == 'POST') {
+      merge(state.data, req.body)
+    }
+  }
+  return state
+}
+/**
+ * State response
+ *
+ * @param {object} req
+ * @param {object} events
+ */
+function HTTPState(req, events) {
+  var exert = {}
+  var state = getState(req)
+  state.on = function on(name, cb) {
+    events.on(mkId(name, req.name), async function(data) {
+      if(!cb) {
+        throw new ReferenceError('Callback function is required.')
+      }
+      return await cb(data)
+    })
+  }
+  state.set = function set(data) {
+    merge(exert, data)
+  }
+  /**
+   * Response for 'fetch' event from client
+   */
+  state.get = function get(cb) {
+    state.on('GET', cb)
+  }
+  /**
+   * Response for 'fetch' event from client
+   */
+  state.post = function post(cb) {
+    state.on('POST', cb)
+  }
+  /**
+   * Initial state
+   */
+  state.use = async function use(initial = {}) {
+    if(isFunc(initial)) {
+      initial = await initial()
+    }
+    if(state.type == 'route' || state.type == 'initial') {
+      merge(state.data, initial)
+    }
+  }
+  /**
+   * Apply and update the current state
+   */
+  state.apply = async function apply(cb) {
+    if(!isFunc(cb)) {
+      return
+    }
+    if(state.type == 'update') {
+      var data = await cb(state.data)
+      if(data) {
+        exert = data
+      }
+    }
+  }
+  return new Proxy(state, {
+    get(target, key) {
+      if(target[key]) {
+        return target[key]
+      }
+      if(exert[key]) {
+        return exert[key]
+      }
+      return target.data[key]
+    },
+    set() {
+      throw new TypeError(`Cannot assign to read only object.`)
+    }
+  })
+}
+/**
+ * Prepare data
+ * @param {object} component
+ * @param {object} context
+ */
+function prepare(component, {meta, store, state}) {
+  const name = component.props.name ?? component.props.id
+  /**
+   * Metadata and component
+   */
+  const {children, ...props} = component.props
+  const data = {
+    meta: {name, bundle: true, ...meta},
+    data: {
+      props,
+      children: isFunc(component.type) ? null : component
+    },
+    store
+  }
+  /**
+   * Get entry component
+   */
+  var app = entry(data.meta)
+  return {
+    name,
+    data: merge(data, {state}),
+    html: html(
+      clone(app, {
+        children: app.props.children.map(dom(data))
+      })
+    )
+  }
+}
+/**
+ * Middleware
+ */
+exports.server = function server() {
+  var data = {}
+  // TODO: Move to more reliable storage
+  var store = {}
+  /**
+   * Persist data
+   */
+  function persist(type, {action, data}) {
+    if(type == 'store') {
+      switch(action) {
+        case 'clear':
+          return {}
+        case 'remove':
+          delete store[data]
+        default:
+          // TODO: Limit adding data
+          return merge(store, data)
+      }
+    }
+    return store
+  }
+  return function(req, res, next, {meta, events, exception}) {
+    const state = HTTPState(req, events)
+    const store = persist(state.type, req.body)
+    /**
+     * Emit state request event
+     */
+    async function emit(name) {
+      return await events.emit(mkId(name, state.page), state.data)
+    }
+    /**
+     * Dispatch data and clear
+     */
+    async function dispatch(obj = {}) {
+      data = {}
+      if(state.type == 'fetch') {
+        return res.json(await emit(req.method))
+      }
+      if(obj.data) {
+        return res.json(reduce(obj))
+      }
+      res.json(obj)
+    }
+    /**
+     * 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(req.is(manif.hash)) {
+      return dispatch(data[manif.hash])
+    }
+    next({state, store})
+  }
+}

package/lib/util.js ADDED Viewed

@@ -0,0 +1,105 @@
+import runtime from 'react/jsx-runtime'
+export const str = JSON.stringify
+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)
+}
+export function toFunc(name, {code, args = [], refs}) {
+  var arr = ['return', 'function', name]
+  if(args) {
+    arr.push(
+      `(${args.length ? args.join(',') : ''})`
+    )
+  }
+  if(typeof code == 'string') {
+    arr.push(`{${code}}`)
+  }
+  return new Function(...Object.keys(refs), arr.join(' '))(...Object.values(refs))
+}
+/**
+ * Transform back to react object
+ */
+export function transform(children, data) {
+  if(!children) {
+    return
+  }
+  if(!isArr(children)) {
+    children = [children]
+  }
+  return children.map(({type, props}, key) => {
+    var p = {}
+    if(!props) {
+      return
+    }
+    if(isArr(type)) {
+      type = data[type[0]]
+    }
+    for(var i in props) {
+      var v = props[i]
+      if(isStr(v) || isNum(v)) {
+        p[i] = v
+      }
+      if(isObj(v)) {
+        if(i == 'style') {
+          p.style = v
+        }
+        if(i == 'children') {
+          p.children = transform(v, data)
+        }
+        if(v.mouseevent) {
+          p[i] = toFunc(v.name, {
+            args: v.args,
+            code: v.code,
+            refs: data.refs
+          })
+        }
+      }
+      if(isArr(v)) {
+        p.children = v.map((i) => {
+          if(isObj(i)) {
+            return transform(i, data)
+          }
+          return i
+        })
+      }
+    }
+    return runtime.jsx(type, p, key)
+  })
+}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@vindo/react",
-  "version": "0.0.1",
-  "description": "React SSR",
+  "version": "0.0.3",
+  "description": "React SSR for @vindo/core framework.",
   "main": "./index.js",
   "types": "./index.d.ts",
   "publishConfig": {
@@ -17,6 +17,24 @@
   "keywords": [
     "react"
   ],
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "exports": {
+    ".": {
+      "default": "./index.js"
+    },
+    "./util": {
+      "default": "./lib/util.js"
+    },
+    "./client": {
+      "default": "./lib/client.js"
+    },
+    "./request": {
+      "default": "./lib/request.js"
+    }
+  },
   "author": "Ruel Mindo",
   "license": "MIT",
   "dependencies": {}

package/client.js DELETED Viewed

@@ -1,95 +0,0 @@
-/*
- * @vindo/react
- * Copyright(c) 2025 Ruel Mindo
- * MIT Licensed
- */
-'use strict'
-const React = require('node_modules/react')
-/**
- * Http Request
- */
-function request({path, data}, opts = {}) {
-  if(data && typeof data !== 'object') {
-    throw TypeError(`Invalid type of 'data'. Expected value of type 'object' but got ${typeof data}'.`)
-  }
-  var uuid = window.crypto.randomUUID()
-  var opts = {
-    ...opts,
-    headers: {
-      ...opts.headers,
-      'X-Fetch-Request-Token': uuid
-    }
-  }
-  var url = new URL(location.href)
-  if(path) {
-    url = new URL(path, location.origin)
-  }
-  if(opts.method == 'GET') {
-    if(data) {
-      for(var i in data) {
-        url.searchParams.append(i, data[i])
-      }
-    }
-  }
-  return fetch(url, opts).then((res) => {
-    return res.headers.get('X-Fetch-Response') == uuid && res.json()
-  })
-}
-/**
- * Http Request
- */
-exports.http = {
-  get(args = {}) {
-    return request(args, {...args.headers, method: 'GET'})
-  },
-  post(args = {}) {
-    return request(args, {
-      body: JSON.stringify(args.data ?? {}),
-      method: 'POST',
-      headers: {
-        ...args.headers,
-        'Content-Type': 'application/json'
-      }
-    })
-  }
-}
-/**
- * HTML Holder
- */
-exports.View = function View({children}) {
-  return children
-}
-/**
- * Find current route
- */
-exports.HydrateContent = function HydrateContent({data, meta, ...props}) {
-  if(data && React.isValidElement(data.content)) {
-    return React.createElement('main', props, data.content)
-  }
-  return React.createElement('main', props, React.Children.map(props.children, (child) => {
-    if(!data || !child.props.name) {
-      return
-    }
-    if(meta.name == child.props.name) {
-      return child.props.component(data.content)
-    }
-  }))
-}