@vindo/react 0.0.1

package/README.md

@@ -0,0 +1,12 @@
+## Cross-origin (CORS)
+Resource sharing restriction for Web and API
+
+
+## Installation
+```
+npm install @vindo/cors
+```
+Or
+```
+yarn add @vindo/cors
+```

package/client.js

@@ -0,0 +1,95 @@
+/*
+ * @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)
+    }
+  }))
+}

package/index.d.ts

@@ -0,0 +1,14 @@
+declare module '@vindo/react' {
+  export const HTTPResponse: {
+    get(cb:Function): void
+    post(cb:Function): void
+  }
+  export function server(): Function;
+}
+
+declare module '@vindo/react/client' {
+  export const http:any;
+  export function View(props): any;
+  export function Hydrate(props): any;
+  export function HydrateContent(props): any;
+}

package/index.js

@@ -0,0 +1,224 @@
+/*
+ * @vindo/react
+ * Copyright(c) 2025 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()
+  }
+}

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@vindo/react",
+  "version": "0.0.1",
+  "description": "React SSR",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {},
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rmindo/vindo.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://github.com/rmindo/vindo/tree/main/packages/react#readme",
+  "keywords": [
+    "react"
+  ],
+  "author": "Ruel Mindo",
+  "license": "MIT",
+  "dependencies": {}
+}