nextia 7.0.12 → 8.0.1

package/package.json

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

package/src/bin.js

@@ -21,7 +21,7 @@ function toPascalCase(str) {
 }
 
 async function createPage(name) {
-  const dirName = `./src/pages/${name}`
+  const dirName = `./src/app/${name}`
   const pageName = `${toPascalCase(name)}Page`
 
   try {
@@ -30,15 +30,13 @@ async function createPage(name) {
     // index.jsx
     writeFile(
       `${dirName}/index.jsx`,
-      `import { css, useFx } from 'nextia'
-import functions from './functions'
-import './style.css'
+      `import useFunctions from './functions'
 
-export default function ${pageName} () {
-  const { state, fx } = useFx(functions)
+export default function ${pageName}() {
+  const { state, fx } = useFunctions()
 
   return (
-    <section className={css('${pageName}', '')}>
+    <section>
       ${pageName}
     </section>
   )
@@ -46,20 +44,18 @@ export default function ${pageName} () {
 `
     )
 
-    // style.sss
-    writeFile(
-      `${dirName}/style.css`,
-      `.${pageName} {
-}
-`
-    )
-
     // function.js
     writeFile(
       `${dirName}/functions.js`,
-      `const initialState = {}
+      `import { useFx } from 'nextia'
+
+export default () => {
+  const initialState = {}
 
-export default { initialState }
+  return useFx({
+    initialState
+  })
+}
 `
     )
     console.info(`✔ Page "${pageName}" created at ${dirName}`)
@@ -81,7 +77,7 @@ async function createComponent(name) {
       `import { css } from 'nextia'
 import './style.css'
 
-export default function ${componentName} ({ className, style }) {
+export default function ${componentName}({ className, style }) {
   return (
     <article className={css('${componentName}', className)} style={style}>
       ${componentName}
@@ -104,54 +100,6 @@ export default function ${componentName} ({ className, style }) {
   }
 }
 
-async function createComponentFx(name) {
-  const dirName = `./src/components/${name}`
-  const componentFxName = toPascalCase(name)
-
-  try {
-    await mkdir(dirName)
-
-    // index.jsx
-    writeFile(
-      `${dirName}/index.jsx`,
-      `import { css, useFx } from 'nextia'
-import functions from './functions'
-import './style.css'
-
-export default function ${componentFxName} ({ className, style }) {
-  const { state, fx } = useFx(functions)
-
-  return (
-    <article className={css('${componentFxName}', className, '')} style={style}>
-      ${componentFxName}
-    </article>
-  )
-}
-`
-    )
-
-    // style.css
-    writeFile(
-      `${dirName}/style.css`,
-      `.${componentFxName}  {
-}
-`
-    )
-
-    // function.js
-    writeFile(
-      `${dirName}/functions.js`,
-      `const initialState = {}
-
-export default { initialState }
-`
-    )
-    console.info(`✔ ComponentFx "${name}" created at ${dirName}`)
-  } catch (err) {
-    console.error(`Failed to create component:fx: ${err.message}`)
-  }
-}
-
 async function main() {
   const ARG1 = process.argv[2]
   const ARG2 = process.argv[3]
@@ -166,11 +114,6 @@ async function main() {
       if (ARG2) await createComponent(ARG2)
       else console.warn('node --run component -- <ComponentName>')
       break
-
-    case 'component:fx':
-      if (ARG2) await createComponentFx(ARG2)
-      else console.warn('node --run component:fx -- <ComponentFxName>')
-      break
   }
 }
 

package/src/lib/fx.js

@@ -7,11 +7,11 @@
  * 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'
-const PagesFx = createContext()
+const Pages = createContext()
 
 /**
  * util
@@ -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),
@@ -144,11 +155,32 @@ const reducerLogger = (state, action) => {
 }
 
 /**
- * useFx
+ * useCx and useFx
  */
 
+function useCx() {
+  const pages = use(Pages)
+  const [icons, setIcons] = useState()
+
+  useEffect(() => {
+    fetch(pages?.icons)
+      .then((r) => r.text())
+      .then((text) => {
+        setIcons(
+          new DOMParser().parseFromString(text, 'image/svg+xml').documentElement
+        )
+      })
+  }, [pages?.icons])
+
+  return {
+    context: pages?.context,
+    i18n: pages?.i18n,
+    icons
+  }
+}
+
 function useFx(functions = { initialState: {} }) {
-  const pagesFx = use(PagesFx)
+  const cx = useCx()
   const { initialState } = functions
   const [state, dispatch] = useReducer(
     LOGGER ? reducerLogger : reducer,
@@ -156,19 +188,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: !pagesFx?.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) => {
@@ -178,7 +214,7 @@ function useFx(functions = { initialState: {} }) {
           ...commonActions,
           state,
           payload,
-          context: pagesFx?.context
+          context: cx?.context
         }
 
         return functions[e](Object.freeze(actionsProps))
@@ -192,13 +228,10 @@ function useFx(functions = { initialState: {} }) {
     initialState,
     state,
     fx: { ...commonActions, ...actions },
-    //
-    context: pagesFx?.context,
-    iconsFile: pagesFx?.iconsFile,
-    i18nFile: pagesFx?.i18nFile
+    context: cx.context
   }
 
   return Object.freeze(props)
 }
 
-export { PagesFx, useFx }
+export { Pages, useCx, useFx }

package/src/lib/index.js

@@ -7,7 +7,7 @@
  * https://github.com/sinuhedev/nextia
  */
 
-import { PagesFx, useFx } from './fx.js'
+import { Pages, useCx, useFx } from './fx.js'
 import { useQueryString, useResize } from './hooks.js'
 import { I18n, Icon, Link, Svg } from './ui.js'
 import { css, env, startViewTransition } from './utils.js'
@@ -18,9 +18,10 @@ export {
   I18n,
   Icon,
   Link,
-  PagesFx,
+  Pages,
   Svg,
   startViewTransition,
+  useCx,
   useFx,
   useQueryString,
   useResize

package/src/lib/ui.js

@@ -8,7 +8,7 @@
  */
 
 import { createElement, useEffect, useRef } from 'react'
-import { useFx } from './fx'
+import { useCx } from './fx'
 
 function Link({ children, href, value = {}, ...props }) {
   href ??= window.location.hash.split('?')[0]
@@ -20,18 +20,14 @@ function Link({ children, href, value = {}, ...props }) {
 }
 
 function I18n({ value, args = [] }) {
-  const { context, i18nFile } = useFx()
+  const { context, i18n } = useCx()
 
-  if (i18nFile) {
+  if (i18n) {
     try {
-      let text = value.split('.').reduce((ac, el) => ac[el], i18nFile)
+      let text = value.split('.').reduce((ac, el) => ac[el], i18n)
 
       text =
-        text[
-          i18nFile.locales.indexOf(
-            context.state?.i18n || i18nFile.defaultLocale
-          )
-        ]
+        text[i18n.locales.indexOf(context.state?.i18n || i18n.defaultLocale)]
 
       if (args) {
         text = text.replace(
@@ -64,20 +60,14 @@ function Icon({
   strokeLinejoin = 'round',
   ...props
 }) {
-  const { iconsFile } = useFx()
+  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
-      }
+    if (icons) {
+      ref.current.innerHTML = icons.getElementById(id).innerHTML
     }
-  }, [id, iconsFile])
+  }, [id, icons])
 
   return createElement('svg', {
     xmlns: 'http://www.w3.org/2000/svg',
@@ -102,17 +92,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', {