nextia 8.0.0 → 8.0.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nextia",
   "description": "Create fast web applications",
-  "version": "8.0.0",
+  "version": "8.0.2",
   "license": "MIT",
   "type": "module",
   "engines": {
@@ -43,7 +43,7 @@
   "devDependencies": {
     "@vitejs/plugin-react": "6.0.1",
     "@vitest/coverage-v8": "4.1.5",
-    "jsdom": "29.0.2",
+    "jsdom": "29.1.0",
     "vitest": "4.1.5"
   }
 }

package/src/bin.js

@@ -30,15 +30,13 @@ async function createPage(name) {
     // index.jsx
     writeFile(
       `${dirName}/index.jsx`,
-      `import { css } from 'nextia'
-import useFunctions from './functions'
-import './style.css'
+      `import useFunctions from './functions'
 
 export default function ${pageName}() {
   const { state, fx } = useFunctions()
 
   return (
-    <section className={css('${pageName}', '')}>
+    <section>
       ${pageName}
     </section>
   )
@@ -46,14 +44,6 @@ export default function ${pageName}() {
 `
     )
 
-    // style.sss
-    writeFile(
-      `${dirName}/style.css`,
-      `.${pageName} {
-}
-`
-    )
-
     // function.js
     writeFile(
       `${dirName}/functions.js`,

package/src/lib/fx.js

@@ -7,7 +7,7 @@
  * https://github.com/sinuhedev/nextia
  */
 
-import { createContext, use, useReducer } from 'react'
+import { createContext, use, useEffect, useReducer, useState } from 'react'
 import { env } from './utils.js'
 
 const LOGGER = env.DEV && env.PUBLIC_LOGGER !== 'false'
@@ -69,7 +69,7 @@ const reducer = (state, action) => {
 
   switch (type) {
     case 'set':
-      // Merge only item
+      // Merge custom items
       if (Object.keys(payload).length === 1) {
         const key = Object.keys(payload)[0]
         return values(state, key, payload[key])
@@ -93,8 +93,19 @@ const reducer = (state, action) => {
           : payload.target.value
       )
 
+    case 'toggle':
+      // toggle custom items
+      if (payload) {
+        const paths = Array.isArray(payload) ? payload : [payload]
+
+        return paths.reduce((ac, path) => {
+          const value = path.split('.').reduce((ac, e) => ac[e], state)
+          return values(ac, path, !value)
+        }, state)
+      } else return state
+
     case 'reset':
-      // value reset
+      // reset custom items
       if (payload) {
         const paths = Array.isArray(payload) ? payload : [payload]
 
@@ -133,7 +144,7 @@ const reducerLogger = (state, action) => {
   }
 
   console.log(
-    `%c${action.isContext ? 'Pages Context' : 'Page'} %c${action.type}`,
+    `%c${action.isContext ? 'Context' : 'Page'} %c${action.type}`,
     'color: #90b1d1',
     'color: #6592c8',
     payloadLog(action),
@@ -149,16 +160,29 @@ const reducerLogger = (state, action) => {
 
 function useCx() {
   const pages = use(Pages)
+  const [icons, setIcons] = useState()
+
+  useEffect(() => {
+    if (!pages?.icons) return
+
+    fetch(pages?.icons)
+      .then((r) => r.text())
+      .then((text) => {
+        setIcons(
+          new DOMParser().parseFromString(text, 'image/svg+xml').documentElement
+        )
+      })
+  }, [pages?.icons])
 
   return {
     context: pages?.context,
-    iconsFile: pages?.iconsFile,
-    i18nFile: pages?.i18nFile
+    i18n: pages?.i18n,
+    icons
   }
 }
 
 function useFx(functions = { initialState: {} }) {
-  const pages = useCx()
+  const cx = useCx()
   const { initialState } = functions
   const [state, dispatch] = useReducer(
     LOGGER ? reducerLogger : reducer,
@@ -166,19 +190,23 @@ function useFx(functions = { initialState: {} }) {
   )
 
   // Common actions
-  const commonActions = ['set', 'show', 'hide', 'change', 'reset'].reduce(
-    (acc, e) => {
-      acc[e] = (payload) =>
-        dispatch({
-          type: e,
-          payload,
-          initialState,
-          isContext: !pages?.context
-        })
-      return acc
-    },
-    {}
-  )
+  const commonActions = [
+    'set',
+    'show',
+    'hide',
+    'change',
+    'toggle',
+    'reset'
+  ].reduce((acc, e) => {
+    acc[e] = (payload) =>
+      dispatch({
+        type: e,
+        payload,
+        initialState,
+        isContext: !cx?.context
+      })
+    return acc
+  }, {})
 
   // Actions
   const actions = Object.keys(functions).reduce((ac, e) => {
@@ -188,7 +216,7 @@ function useFx(functions = { initialState: {} }) {
           ...commonActions,
           state,
           payload,
-          context: pages?.context
+          context: cx?.context
         }
 
         return functions[e](Object.freeze(actionsProps))
@@ -202,7 +230,7 @@ function useFx(functions = { initialState: {} }) {
     initialState,
     state,
     fx: { ...commonActions, ...actions },
-    ...pages
+    context: cx.context
   }
 
   return Object.freeze(props)

package/src/lib/ui.js

@@ -20,31 +20,26 @@ function Link({ children, href, value = {}, ...props }) {
 }
 
 function I18n({ value, args = [] }) {
-  const { context, i18nFile } = useCx()
-
-  if (i18nFile) {
-    try {
-      let text = value.split('.').reduce((ac, el) => ac[el], i18nFile)
-
-      text =
-        text[
-          i18nFile.locales.indexOf(
-            context.state?.i18n || i18nFile.defaultLocale
-          )
-        ]
-
-      if (args) {
-        text = text.replace(
-          /([{}])\\1|[{](.*?)(?:!(.+?))?[}]/g,
-          (match, _literal, number) => args[number] || match
-        )
-      }
-
-      return text
-    } catch {
-      console.error(`Error in [il8n] => ${value}`)
-      return value
+  const { context, i18n } = useCx()
+
+  if (!i18n) return null
+
+  try {
+    let text = value.split('.').reduce((ac, el) => ac[el], i18n)
+
+    text = text[i18n.locales.indexOf(context.state?.i18n || i18n.defaultLocale)]
+
+    if (args) {
+      text = text.replace(
+        /([{}])\\1|[{](.*?)(?:!(.+?))?[}]/g,
+        (match, _literal, number) => args[number] || match
+      )
     }
+
+    return text
+  } catch {
+    console.error(`Error in [il8n] => ${value}`)
+    return value
   }
 }
 
@@ -64,20 +59,13 @@ function Icon({
   strokeLinejoin = 'round',
   ...props
 }) {
-  const { iconsFile } = useCx()
+  const { icons } = useCx()
   const ref = useRef()
 
   useEffect(() => {
-    if (iconsFile) {
-      const svg = new DOMParser()
-        .parseFromString(iconsFile, 'image/svg+xml')
-        .documentElement.getElementById(id)
-
-      if (svg) {
-        ref.current.innerHTML = svg.innerHTML
-      }
-    }
-  }, [id, iconsFile])
+    const el = icons?.getElementById(id)
+    if (ref.current && el) ref.current.innerHTML = el.innerHTML
+  }, [id, icons])
 
   return createElement('svg', {
     xmlns: 'http://www.w3.org/2000/svg',
@@ -102,17 +90,21 @@ function Svg({ ref, src, width, height, ...props }) {
   ref ??= useRef()
 
   useEffect(() => {
-    const svg = new DOMParser().parseFromString(
-      src,
-      'image/svg+xml'
-    ).documentElement
-
-    for (const { name, value } of svg.attributes) {
-      if (name !== 'width' && name !== 'height')
-        ref.current.setAttribute(name, value)
-    }
-
-    ref.current.replaceChildren(...svg.children)
+    fetch(src)
+      .then((r) => r.text())
+      .then((text) => {
+        const svg = new DOMParser().parseFromString(
+          text,
+          'image/svg+xml'
+        ).documentElement
+
+        for (const { name, value } of svg.attributes) {
+          if (name !== 'width' && name !== 'height')
+            ref.current.setAttribute(name, value)
+        }
+
+        ref.current.replaceChildren(...svg.children)
+      })
   }, [src, ref])
 
   return createElement('svg', {