nextia 7.0.11 → 8.0.0

package/package.json

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

package/src/bin.js

@@ -9,7 +9,7 @@
  * https://github.com/sinuhedev/nextia
  */
 
-import { writeFile } from 'node:fs/promises'
+import { mkdir, writeFile } from 'node:fs/promises'
 
 function toPascalCase(str) {
   return str
@@ -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,13 +30,12 @@ async function createPage(name) {
     // index.jsx
     writeFile(
       `${dirName}/index.jsx`,
-      `import { css, useFx } from 'nextia'
-import { useEffect } from 'react'
-import functions from './functions'
+      `import { css } from 'nextia'
+import useFunctions from './functions'
 import './style.css'
 
-export default function ${pageName} () {
-  const { state, fx } = useFx(functions)
+export default function ${pageName}() {
+  const { state, fx } = useFunctions()
 
   return (
     <section className={css('${pageName}', '')}>
@@ -58,9 +57,15 @@ export default function ${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}`)
@@ -71,19 +76,18 @@ export default { initialState }
 
 async function createComponent(name) {
   const dirName = `./src/components/${name}`
+  const componentName = toPascalCase(name)
 
   try {
     await mkdir(dirName)
-    const componentName = toPascalCase(name)
 
     // index.jsx
     writeFile(
       `${dirName}/index.jsx`,
       `import { css } from 'nextia'
-import { useEffect } from 'react'
 import './style.css'
 
-export default function ${componentName} ({ className, style }) {
+export default function ${componentName}({ className, style }) {
   return (
     <article className={css('${componentName}', className)} style={style}>
       ${componentName}
@@ -106,55 +110,6 @@ export default function ${componentName} ({ className, style }) {
   }
 }
 
-async function createContainer(name) {
-  const dirName = `./src/components/${name}`
-
-  try {
-    await mkdir(dirName)
-    const containerName = toPascalCase(name)
-
-    // index.jsx
-    writeFile(
-      `${dirName}/index.jsx`,
-      `import { css, useFx } from 'nextia'
-import { useEffect } from 'react'
-import functions from './functions'
-import './style.css'
-
-export default function ${containerName} ({ className, style }) {
-  const { state, fx } = useFx(functions)
-
-  return (
-    <article className={css('${containerName}', className, '')} style={style}>
-      ${containerName}
-    </article>
-  )
-}
-`
-    )
-
-    // style.css
-    writeFile(
-      `${dirName}/style.css`,
-      `.${containerName}  {
-}
-`
-    )
-
-    // function.js
-    writeFile(
-      `${dirName}/functions.js`,
-      `const initialState = {}
-
-export default { initialState }
-`
-    )
-    console.info(`✔ Container "${name}" created at ${dirName}`)
-  } catch (err) {
-    console.error(`Failed to create container: ${err.message}`)
-  }
-}
-
 async function main() {
   const ARG1 = process.argv[2]
   const ARG2 = process.argv[3]
@@ -162,17 +117,12 @@ async function main() {
   switch (ARG1) {
     case 'page':
       if (ARG2) await createPage(ARG2)
-      else console.warn('node --run nextia page <page-name>')
+      else console.warn('node --run page -- <page-name>')
       break
 
     case 'component':
       if (ARG2) await createComponent(ARG2)
-      else console.warn('node --run nextia component <ComponentName>')
-      break
-
-    case 'container':
-      if (ARG2) await createContainer(ARG2)
-      else console.warn('node --run nextia container <ContainerName>')
+      else console.warn('node --run component -- <ComponentName>')
       break
   }
 }

package/src/lib/fx.js

@@ -11,7 +11,7 @@ import { createContext, use, useReducer } from 'react'
 import { env } from './utils.js'
 
 const LOGGER = env.DEV && env.PUBLIC_LOGGER !== 'false'
-const PagesFx = createContext()
+const Pages = createContext()
 
 /**
  * util
@@ -144,11 +144,21 @@ const reducerLogger = (state, action) => {
 }
 
 /**
- * useFx
+ * useCx and useFx
  */
 
+function useCx() {
+  const pages = use(Pages)
+
+  return {
+    context: pages?.context,
+    iconsFile: pages?.iconsFile,
+    i18nFile: pages?.i18nFile
+  }
+}
+
 function useFx(functions = { initialState: {} }) {
-  const pagesFx = use(PagesFx)
+  const pages = useCx()
   const { initialState } = functions
   const [state, dispatch] = useReducer(
     LOGGER ? reducerLogger : reducer,
@@ -163,7 +173,7 @@ function useFx(functions = { initialState: {} }) {
           type: e,
           payload,
           initialState,
-          isContext: !pagesFx?.context
+          isContext: !pages?.context
         })
       return acc
     },
@@ -178,7 +188,7 @@ function useFx(functions = { initialState: {} }) {
           ...commonActions,
           state,
           payload,
-          context: pagesFx?.context
+          context: pages?.context
         }
 
         return functions[e](Object.freeze(actionsProps))
@@ -192,13 +202,10 @@ function useFx(functions = { initialState: {} }) {
     initialState,
     state,
     fx: { ...commonActions, ...actions },
-    //
-    context: pagesFx?.context,
-    iconsFile: pagesFx?.iconsFile,
-    i18nFile: pagesFx?.i18nFile
+    ...pages
   }
 
   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,7 +20,7 @@ function Link({ children, href, value = {}, ...props }) {
 }
 
 function I18n({ value, args = [] }) {
-  const { context, i18nFile } = useFx()
+  const { context, i18nFile } = useCx()
 
   if (i18nFile) {
     try {
@@ -64,7 +64,7 @@ function Icon({
   strokeLinejoin = 'round',
   ...props
 }) {
-  const { iconsFile } = useFx()
+  const { iconsFile } = useCx()
   const ref = useRef()
 
   useEffect(() => {