nextia 9.0.0 → 9.0.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nextia",
   "description": "Create fast web applications",
-  "version": "9.0.0",
+  "version": "9.0.2",
   "license": "MIT",
   "type": "module",
   "engines": {

package/src/fx.js

@@ -7,7 +7,7 @@
  * https://github.com/sinuhedev/nextia
  */
 
-import { createContext, use, useEffect, useReducer, useState } from 'react'
+import { createContext, use, useReducer } from 'react'
 
 const Pagex = createContext()
 
@@ -158,24 +158,11 @@ const reducerLogger = (state, action) => {
 
 function useCx() {
   const pages = use(Pagex)
-  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,
     i18n: pages?.i18n,
-    icons,
+    icons: pages?.icons,
     logger: pages?.logger ?? false
   }
 }

package/src/index.js

@@ -10,10 +10,11 @@
 import { Pagex, useCx, useFx } from './fx.js'
 import { useQueryString, useResize } from './hooks.js'
 import { I18n, Icon, Link, Svg } from './ui.js'
-import { css, startViewTransition, version } from './utils.js'
+import { css, getVersion, startViewTransition } from './utils.js'
 
 export {
   css,
+  getVersion,
   I18n,
   Icon,
   Link,
@@ -23,6 +24,5 @@ export {
   useCx,
   useFx,
   useQueryString,
-  useResize,
-  version
+  useResize
 }

package/src/ui.js

@@ -10,35 +10,27 @@
 import { createElement, useEffect, useRef } from 'react'
 import { useCx } from './fx.js'
 
-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 } = 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
+    const text = value.split('.').reduce((ac, el) => ac[el], i18n)
+    const locale = context.state?.i18n ?? i18n.defaultLocale
+    const index = i18n.locales.indexOf(locale)
+    let translated = text[index]
+
+    if (args?.length) {
+      translated = translated.replace(
+        /([{}])\1|[{](.*?)(?:!(.+?))?[}]/g,
+        (match, _literal, number) => args[number] ?? match
       )
     }
 
-    return text
+    return translated
   } catch {
-    console.error(`Error in [il8n] => ${value}`)
+    console.error(`[i18n] key not found: "${value}"`)
     return value
   }
 }
@@ -46,7 +38,6 @@ function I18n({ value, args = [] }) {
 function Icon({
   id,
   className,
-  animate = false,
   style,
   width = '48',
   height,
@@ -63,8 +54,13 @@ function Icon({
   const ref = useRef()
 
   useEffect(() => {
-    const el = icons?.getElementById(id)
-    if (ref.current && el) ref.current.innerHTML = el.innerHTML
+    if (!ref.current || !icons) return
+
+    const el = new DOMParser()
+      .parseFromString(icons, 'image/svg+xml')
+      .documentElement.getElementById(id)
+
+    if (el) ref.current.innerHTML = el.innerHTML
   }, [id, icons])
 
   return createElement('svg', {
@@ -86,6 +82,16 @@ function Icon({
   })
 }
 
+function Link({ children, href, value, ...props }) {
+  const base = href ?? window.location.hash.split('?')[0]
+  const query =
+    value && Object.keys(value).length
+      ? `?${new URLSearchParams(value).toString()}`
+      : ''
+
+  return createElement('a', { href: base + query, ...props }, children)
+}
+
 function Svg({ ref, src, width, height, ...props }) {
   ref ??= useRef()
 

package/src/utils.js

@@ -7,18 +7,6 @@
  * https://github.com/sinuhedev/nextia
  */
 
-/**
- * View Transition
- */
-
-async function startViewTransition(fun = () => {}, ref, animation = 'fade') {
-  if (!document.startViewTransition) return fun()
-
-  ref.style.viewTransitionName = animation
-  await document.startViewTransition(() => fun).finished
-  ref.style.viewTransitionName = ''
-}
-
 /**
  * css
  */
@@ -46,7 +34,7 @@ function css(...classNames) {
  * getVersion
  */
 
-const version = () =>
+const getVersion = () =>
   Object.fromEntries(
     document
       .querySelector('meta[name="version"]')
@@ -58,4 +46,16 @@ const version = () =>
       }) ?? ''
   )
 
-export { css, startViewTransition, version }
+/**
+ * View Transition
+ */
+
+async function startViewTransition(fun = () => {}, ref, animation = 'fade') {
+  if (!document.startViewTransition) return fun()
+
+  ref.style.viewTransitionName = animation
+  await document.startViewTransition(() => fun).finished
+  ref.style.viewTransitionName = ''
+}
+
+export { css, getVersion, startViewTransition }