nextia 7.0.0 → 7.0.3

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "nextia",
   "description": "Create fast web applications",
-  "version": "7.0.0",
+  "version": "7.0.3",
+  "license": "MIT",
+  "type": "module",
   "engines": {
     "node": ">22"
   },
-  "type": "module",
-  "license": "MIT",
   "author": {
     "name": "Sinuhe Maceda",
     "email": "sinuhe.dev@gmail.com",
@@ -23,7 +23,9 @@
   "bin": {
     "nextia": "src/bin.js"
   },
-  "main": "src/lib.js",
+  "exports": {
+    ".": "./src/lib/index.js"
+  },
   "scripts": {
     "clean": "rm -fr my-app node_modules package-lock.json .coverage out",
     "format": "biome format",
@@ -32,13 +34,7 @@
     "test": "vitest run",
     "test:name": "vitest run --testNamePattern",
     "test:silent": "vitest run --silent",
-    "test:coverage": "vitest run --silent --coverage",
-    "test:version": "./src/bin.js",
-    "test:my-app": "rm -fr my-app && src/bin.js my-app",
-    "test:my-app:exists": "src/bin.js my-app",
-    "test:my-page": "cd my-app && ../src/bin.js page my-page",
-    "test:my-component": "cd my-app && ../src/bin.js component MyComponent",
-    "test:my-container": "cd my-app && ../src/bin.js container MyContainer"
+    "test:coverage": "vitest run --silent --coverage"
   },
   "peerDependencies": {
     "react": "^19.2.3",
@@ -46,8 +42,8 @@
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^6.0.1",
-    "@vitest/coverage-v8": "^4.0.18",
+    "@vitest/coverage-v8": "^4.1.2",
     "jsdom": "^29.0.1",
-    "vitest": "^4.0.18"
+    "vitest": "^4.1.2"
   }
 }

package/src/bin.js

@@ -6,20 +6,10 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * https://github.com/sinuhedev/create-nextia
+ * https://github.com/sinuhedev/nextia
  */
 
-import {
-  access,
-  cp,
-  mkdir,
-  readFile,
-  rename,
-  writeFile
-} from 'node:fs/promises'
-import { dirname } from 'node:path'
-import { fileURLToPath } from 'node:url'
-import pkg from '../package.json' with { type: 'json' }
+import { writeFile } from 'node:fs/promises'
 
 function toPascalCase(str) {
   return str
@@ -126,8 +116,8 @@ async function createContainer(name) {
     // index.jsx
     writeFile(
       `${dirName}/index.jsx`,
-      `import { useEffect } from 'react'
-import { css, useFx } from 'nextia'
+      `import { css, useFx } from 'nextia'
+import { useEffect } from 'react'
 import functions from './functions'
 import './style.css'
 
@@ -165,49 +155,6 @@ export default { initialState }
   }
 }
 
-async function createProject(name) {
-  const projectPath = `${process.cwd()}/${name}/`
-
-  try {
-    await access(projectPath)
-    console.error(`The ${name} already exists`)
-    return
-  } catch {
-    /* directory doesn't exist, proceed */
-  }
-
-  try {
-    const __dirname = dirname(fileURLToPath(import.meta.url))
-    const templatePath = `${__dirname}/../template`
-
-    const replaceToken = async (filename, token, value) => {
-      const content = await readFile(projectPath + filename, 'utf8')
-      await writeFile(
-        projectPath + filename,
-        content.replaceAll(token, value),
-        'utf8'
-      )
-    }
-
-    await cp(templatePath, projectPath, { recursive: true })
-    await cp(`${__dirname}/../biome.json`, `${projectPath}/biome.json`)
-
-    await Promise.all(
-      ['env.dev', 'env.prod', 'env.test', 'gitignore'].map((fileName) =>
-        rename(`${projectPath}_${fileName}`, `${projectPath}.${fileName}`)
-      )
-    )
-
-    await replaceToken('README.md', 'TEMPLATE', name)
-    await replaceToken('package.json', 'TEMPLATE', name)
-    await replaceToken('package.json', 'file:../', pkg.version)
-
-    console.info(`✔ Project "${name}" created successfully!`)
-  } catch (err) {
-    console.error(`Failed to create project: ${err.message}`)
-  }
-}
-
 async function main() {
   const ARG1 = process.argv[2]
   const ARG2 = process.argv[3]
@@ -227,11 +174,6 @@ async function main() {
       if (ARG2) await createContainer(ARG2)
       else console.warn('node --run nextia container <ContainerName>')
       break
-
-    default:
-      if (ARG1) await createProject(ARG1)
-      else console.info(`v${pkg.version}\nnpm create nextia <ProjectName>`)
-      break
   }
 }
 

package/src/{lib.js → lib/fx.js}

@@ -10,31 +10,12 @@
 import { createContext, use, useReducer } from 'react'
 
 const LOGGER = import.meta.env.DEV && import.meta.env.PUBLIC_LOGGER !== 'false'
-const PagesContext = createContext()
+const PagesFx = createContext()
 
 /**
  * util
  */
 
-function css(...classNames) {
-  return classNames
-    .reduce((accumulator, currentValue) => {
-      if (typeof currentValue === 'string') {
-        accumulator.push(currentValue.trim())
-      } else if (
-        !Array.isArray(currentValue) &&
-        typeof currentValue === 'object'
-      ) {
-        for (const e in currentValue) {
-          if (currentValue[e]) accumulator.push(e.trim())
-        }
-      }
-      return accumulator
-    }, [])
-    .filter((e) => e)
-    .join(' ')
-}
-
 function values(state, payload, value) {
   const paths = payload.split('.')
 
@@ -166,7 +147,7 @@ const reducerLogger = (state, action) => {
  */
 
 function useFx(functions = { initialState: {} }) {
-  const pageContext = use(PagesContext)
+  const pagesFx = use(PagesFx)
   const { initialState } = functions
   const [state, dispatch] = useReducer(
     LOGGER ? reducerLogger : reducer,
@@ -177,7 +158,12 @@ function useFx(functions = { initialState: {} }) {
   const commonActions = ['set', 'show', 'hide', 'change', 'reset'].reduce(
     (acc, e) => {
       acc[e] = (payload) =>
-        dispatch({ type: e, payload, initialState, isContext: !pageContext })
+        dispatch({
+          type: e,
+          payload,
+          initialState,
+          isContext: !pagesFx?.context
+        })
       return acc
     },
     {}
@@ -190,10 +176,8 @@ function useFx(functions = { initialState: {} }) {
         const actionsProps = {
           ...commonActions,
           state,
-          payload
-        }
-        if (pageContext) {
-          actionsProps.context = pageContext
+          payload,
+          context: pagesFx?.context
         }
 
         return functions[e](Object.freeze(actionsProps))
@@ -206,13 +190,14 @@ function useFx(functions = { initialState: {} }) {
   const props = {
     initialState,
     state,
-    fx: { ...commonActions, ...actions }
-  }
-  if (pageContext) {
-    props.context = pageContext
+    fx: { ...commonActions, ...actions },
+    //
+    context: pagesFx?.context,
+    icons: pagesFx?.icons,
+    i18n: pagesFx?.i18n
   }
 
   return Object.freeze(props)
 }
 
-export { css, PagesContext, useFx }
+export { PagesFx, useFx }

package/src/lib/index.js

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2025 Sinuhe Maceda https://sinuhe.dev
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * https://github.com/sinuhedev/nextia
+ */
+
+import { PagesFx, useFx } from './fx.js'
+import { I18n, Icon, Link, Svg } from './ui.js'
+import {
+  css,
+  env,
+  startViewTransition,
+  useQueryString,
+  useResize
+} from './utils.js'
+
+export {
+  css,
+  env,
+  I18n,
+  Icon,
+  Link,
+  PagesFx,
+  Svg,
+  startViewTransition,
+  useFx,
+  useQueryString,
+  useResize
+}

package/src/lib/ui.js

@@ -0,0 +1,121 @@
+/**
+ * Copyright (c) 2025 Sinuhe Maceda https://sinuhe.dev
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * https://github.com/sinuhedev/nextia
+ */
+
+import { createElement, useEffect, useRef } from 'react'
+import { useFx } from './fx'
+import { css } from './utils'
+
+function Link({ children, href, value = {}, ...props }) {
+  href ??= window.location.hash.split('?')[0]
+  value = Object.keys(value).length
+    ? `?${new URLSearchParams(value).toString()}`
+    : ''
+
+  return createElement('a', { href: href + value, ...props }, children)
+}
+
+function I18n({ value, args = [] }) {
+  const { context, i18n } = useFx()
+
+  if (i18n) {
+    try {
+      let text = value.split('.').reduce((ac, el) => ac[el], i18n)
+      text = text[i18n.locales.indexOf(context.state.i18n.currentLocale)]
+
+      if (args) {
+        text = text.replace(
+          /([{}])\\1|[{](.*?)(?:!(.+?))?[}]/g,
+          (match, _literal, number) => args[number] || match
+        )
+      }
+
+      return text
+    } catch {
+      console.error(`Error in [il8n] => ${value}`)
+      return value
+    }
+  }
+}
+
+function Icon({
+  id,
+  className,
+  animate = false,
+  style,
+  width = '48',
+  height,
+  viewBox = '0 0 48 48',
+  fill = 'none',
+  color = 'currentColor',
+  stroke = 'currentColor',
+  strokeWidth = '2',
+  strokeLinecap = 'round',
+  strokeLinejoin = 'round',
+  ...props
+}) {
+  const { icons } = useFx()
+  const ref = useRef()
+
+  useEffect(() => {
+    if (icons) {
+      const svg = new DOMParser()
+        .parseFromString(icons, 'image/svg+xml')
+        .documentElement.getElementById(id)
+
+      if (svg) {
+        ref.current.innerHTML = svg.innerHTML
+      }
+    }
+  }, [id, icons])
+
+  return createElement('svg', {
+    xmlns: 'http://www.w3.org/2000/svg',
+    ref,
+    id,
+    className: css({ 'nextia-animate-icon': animate }, className),
+    style,
+    width,
+    height: height ?? width,
+    viewBox,
+    fill,
+    color,
+    stroke,
+    strokeWidth,
+    strokeLinecap,
+    strokeLinejoin,
+    ...props
+  })
+}
+
+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)
+  }, [src, ref])
+
+  return createElement('svg', {
+    ref,
+    width,
+    height: height ?? width,
+    ...props
+  })
+}
+
+export { I18n, Icon, Link, Svg }

package/src/lib/utils.js

@@ -0,0 +1,107 @@
+/**
+ * Copyright (c) 2025 Sinuhe Maceda https://sinuhe.dev
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * https://github.com/sinuhedev/nextia
+ */
+
+import { useCallback, useEffect, useState } from 'react'
+import { flushSync } from 'react-dom'
+
+/**
+ * env
+ */
+
+const env = import.meta.env
+
+/**
+ * View Transition
+ */
+
+async function startViewTransition(fun = () => {}, ref, animation = 'fade') {
+  if (!document.startViewTransition || env.PUBLIC_VIEW_TRANSITION === 'false')
+    return fun()
+
+  ref.style.viewTransitionName = animation
+  await document.startViewTransition(() => flushSync(fun)).finished
+  ref.style.viewTransitionName = ''
+}
+
+/**
+ * hooks
+ */
+
+function useQueryString() {
+  const getQueryString = useCallback(
+    () => ({
+      hash: window.location.hash.split('?')[0],
+      queryString: Object.fromEntries(
+        new URLSearchParams(window.location.hash.split('?')[1])
+      )
+    }),
+    []
+  )
+
+  const [queryString, setQueryString] = useState(getQueryString)
+
+  useEffect(() => {
+    const handlePopState = () => setQueryString(getQueryString())
+
+    window.addEventListener('popstate', handlePopState)
+    return () => {
+      window.removeEventListener('popstate', handlePopState)
+    }
+  }, [getQueryString])
+
+  return queryString
+}
+
+function useResize() {
+  const getResize = useCallback(
+    () => ({
+      width: window.innerWidth,
+      height: window.innerHeight
+    }),
+    []
+  )
+
+  const [resize, setResize] = useState(getResize)
+
+  useEffect(() => {
+    const handleResize = () => setResize(getResize())
+
+    window.addEventListener('resize', handleResize)
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [getResize])
+
+  return resize
+}
+
+/**
+ * util
+ */
+
+function css(...classNames) {
+  return classNames
+    .reduce((accumulator, currentValue) => {
+      if (typeof currentValue === 'string') {
+        accumulator.push(currentValue.trim())
+      } else if (
+        !Array.isArray(currentValue) &&
+        typeof currentValue === 'object'
+      ) {
+        for (const e in currentValue) {
+          if (currentValue[e]) accumulator.push(e.trim())
+        }
+      }
+      return accumulator
+    }, [])
+    .filter((e) => e)
+    .join(' ')
+}
+
+export { css, env, startViewTransition, useQueryString, useResize }

package/template/README.md

@@ -1,29 +0,0 @@
-# TEMPLATE
-
-# To start
-Open http://localhost:3000 to view it in the browser.
-
-```sh
-npm install
-#
-node --run dev
-node --run test
-node --run build <ENV>
-node --run preview
-```
-
-# env
-```.env
-.env          # loaded in all cases
-.env.[ENV]    # only loaded in specified ENV [ dev, test, prod ]
-```
-
- * .env.dev
- * .env.prod
- * .env.test
- 
-```env
-PUBLIC_TITLE=TITLE
-PUBLIC_LOGGER=true
-PUBLIC_VIEW_TRANSITION=true
-```

package/template/_env.dev

@@ -1,4 +0,0 @@
-PUBLIC_TITLE=dev
-PUBLIC_LOGGER=true
-PUBLIC_VIEW_TRANSITION=true
-PUBLIC_API=https://65fd14fb9fc4425c653119c5.mockapi.io/api/v1

package/template/_env.prod

@@ -1 +0,0 @@
-PUBLIC_TITLE=prod

package/template/_env.test

@@ -1 +0,0 @@
-PUBLIC_TITLE=test

package/template/_gitignore

@@ -1,10 +0,0 @@
-node_modules
-
-out
-deploy
-deploy-variables
-
-.coverage
-.env
-.env.*
-

package/template/package.json

@@ -1,35 +0,0 @@
-{
-  "name": "TEMPLATE",
-  "description": "description",
-  "version": "0.0.0",
-  "type": "module",
-  "private": true,
-  "scripts": {
-    "dev": "vite --mode dev",
-    "clean": "rm -fr node_modules package-lock.json .coverage out",
-    "build": "vite build --mode",
-    "preview": "vite preview",
-    "format": "biome format",
-    "lint": "biome lint",
-    "check": "biome check --reporter=summary",
-    "page": "nextia page",
-    "component": "nextia component",
-    "container": "nextia container",
-    "test": "vitest",
-    "test:name": "vitest run --testNamePattern",
-    "test:silent": "vitest run --silent",
-    "test:coverage": "vitest run --silent --coverage"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-react": "^6.0.1",
-    "@vitest/coverage-v8": "^4.0.18",
-    "jsdom": "^29.0.1",
-    "vite": "^8.0.1",
-    "vitest": "^4.0.18"
-  },
-  "dependencies": {
-    "nextia": "file:../",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4"
-  }
-}

package/template/public/error.html

@@ -1,14 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-	<meta charset="UTF-8" />
-	<title>Error</title>
-	<link rel="shortcut icon" href="logo.svg" />
-</head>
-
-<body>
-	Error ...
-</body>
-
-</html>