(\"initial\");\n\n const Cpp = memo(() => {\n let theme = useContext(AppContext);\n\n return () => Cpp: {theme}
;\n });\n\n const Dpp = () => {\n return () => (\n \n {(theme) => Dpp: {theme}
}\n \n );\n };\n\n const Epp = () => {\n return () => (\n \n {(theme) => Epp: {theme}
}\n \n );\n };\n\n const Bpp = () => {\n let theme = useContext(AppContext);\n\n return () => (\n \n Bpp: {theme}\n
\n \n
\n \n App
\n \n \n );\n };\n\n testRender(App
Dpp: light
Epp: initial
\"\n );\n\n await rendered();\n\n expect(root.innerHTML).toBe(\n \"App
Dpp: dark
Epp: initial
\"\n );\n});\n\nit(\"context pass through\", async () => {\n const AppContext = createContext({} as any);\n\n const App = () => {\n let [hello, setHello] = useState(\"hello\");\n\n return () => (\n \n \n
\n \n );\n };\n\n const Bpp = () => {\n let { hello, setHello } = useContext(AppContext);\n return () => hello
\");\n\n await rendered();\n\n expect(root.innerHTML).toBe(\"world
\");\n});\n"
},
{
"path": "packages/unis-dom/src/browser/__test__/dom.test.tsx",
"content": "/**\n * @vitest-environment jsdom\n */\nimport { afterEach, beforeEach, expect, it } from \"vitest\";\nimport { useEffect } from \"@unis/core\";\nimport { useState } from \"@unis/core\";\nimport { rendered, testRender } from \"./util\";\n\nlet root: Element;\n\nbeforeEach(() => {\n root = document.createElement(\"div\");\n document.body.append(root);\n});\n\nafterEach(() => {\n root.innerHTML = \"\";\n});\n\nit(\"dom\", async () => {\n const App = () => {\n let [toggle, setToggle] = useState(true);\n\n const getCurrentStyle = () => {\n return toggle\n ? {\n style: {\n background: \"yellow\",\n },\n tabindex: \"1\",\n className: \"class1\",\n onClick: () => {},\n }\n : {\n style: {\n background: \"red\",\n },\n tabindex: \"2\",\n onClick: () => {},\n };\n };\n\n useEffect(\n () => {\n setToggle(false);\n },\n () => []\n );\n\n return () => {\n return hello
;\n };\n };\n\n testRender(hello
'\n );\n await rendered();\n expect(root.innerHTML).toBe(\n 'hello
'\n );\n});\n"
},
{
"path": "packages/unis-dom/src/browser/__test__/effect.test.tsx",
"content": "/**\n * @vitest-environment jsdom\n */\nimport { afterEach, beforeEach, expect, it } from \"vitest\";\nimport { useEffect } from \"@unis/core\";\nimport { useState } from \"@unis/core\";\nimport { rendered, testRender } from \"./util\";\n\nlet root: Element;\n\nbeforeEach(() => {\n root = document.createElement(\"div\");\n document.body.append(root);\n});\n\nafterEach(() => {\n root.innerHTML = \"\";\n});\n\nit(\"effect\", async () => {\n const Bpp = () => {\n useEffect(\n () => {\n return () => {};\n },\n () => []\n );\n return () => \"bpp\";\n };\n\n const App = () => {\n let [visible, setVisible] = useState(true);\n\n useEffect(\n () => {\n setVisible(false);\n },\n () => []\n );\n\n return () => (visible ? Apphello
\";\n\n let setMsgOutter: any;\n\n const App = () => {\n let [msg, setMsg] = useState(\"hello\");\n\n use(() => {\n setMsgOutter = setMsg;\n });\n\n return () => (\n \n App{msg} \n
\n );\n };\n\n testRender(Apphello
\");\n\n setMsgOutter(\"world\");\n\n await rendered();\n\n expect(root.innerHTML).toBe(\"Appworld
\");\n});\n"
},
{
"path": "packages/unis-dom/src/browser/__test__/memo.test.tsx",
"content": "/**\n * @vitest-environment jsdom\n */\nimport { afterEach, beforeEach, expect, it } from \"vitest\";\nimport { useEffect } from \"@unis/core\";\nimport { useState } from \"@unis/core\";\nimport { h2, memo } from \"@unis/core\";\nimport { rendered, testRender } from \"./util\";\n\nlet root: Element;\n\nbeforeEach(() => {\n root = document.createElement(\"div\");\n document.body.append(root);\n});\n\nafterEach(() => {\n root.innerHTML = \"\";\n});\n\nit(\"memo\", async () => {\n const Bpp = memo(() => {\n let renderCount = 0;\n\n return () => {\n return {renderCount++}
;\n };\n });\n const App = () => {\n let [msg, setMsg] = useState(\"hello\");\n\n useEffect(\n () => {\n setMsg(\"hello world\");\n },\n () => []\n );\n\n return () => (\n \n {msg}\n {h2(Bpp, {}, \"key\")}\n
\n );\n };\n\n testRender(\n hello
\n {visible && createPortal(hello dialog , dialog)}\n \n );\n };\n\n testRender(hello dialog
\"\n );\n await rendered();\n expect(document.body.innerHTML).toBe(\n \"
\"\n );\n});\n"
},
{
"path": "packages/unis-dom/src/browser/__test__/reconcile.test.tsx",
"content": "/**\n * @vitest-environment jsdom\n */\nimport { afterEach, beforeEach, expect, it } from \"vitest\";\nimport { useEffect } from \"@unis/core\";\nimport { useState } from \"@unis/core\";\nimport { rendered, testRender } from \"./util\";\n\nlet root: Element;\n\nbeforeEach(() => {\n root = document.createElement(\"div\");\n document.body.append(root);\n});\n\nafterEach(() => {\n root.innerHTML = \"\";\n});\n\nit(\"diff with key\", async () => {\n const App = () => {\n let [toggle, setToggle] = useState(false);\n\n useEffect(\n () => {\n setToggle(true);\n },\n () => []\n );\n\n return () =>\n !toggle ? (\n \n
1 \n
2 \n
3 \n
del
\n
4 \n
5
\n
6
\n
\n
1 \n
5
\n
4 \n
2 \n
3 \n
6
\n
\n <>\n
hello \n world \n \n \n );\n };\n\n const result = renderToString(
hello world '\n );\n});\n"
},
{
"path": "packages/unis-dom/src/server/index.ts",
"content": "import { createRoot, createTokTik, readyForWork } from \"@unis/core\";\nimport { createOperator, ElementNode } from \"./operator\";\n\nconst operator = createOperator();\n\nconst toktik = createTokTik({\n nextTick: (cb: VoidFunction) =>\n Promise.resolve()\n .catch((err) => console.error(err))\n .then(() => cb()),\n now: () => 0,\n});\n\nexport const renderToString = (element: any) => {\n const rootNode = new ElementNode(\"\");\n const rootFiber = createRoot(element, rootNode);\n rootFiber.runtime = {\n toktik,\n operator,\n };\n readyForWork(rootFiber);\n return rootNode.renderToString();\n};\n"
},
{
"path": "packages/unis-dom/src/server/operator.ts",
"content": "import { isEvent, isNullish, Operator, Fiber, isText } from \"@unis/core\";\n\nexport class ElementNode {\n children: ServerNode[] = [];\n\n properties: Record = {};\n\n constructor(public tagName: string) {}\n\n insertBefore(\n node: ElementNode | TextNode,\n child: ElementNode | TextNode | null\n ) {\n this.children.push(node);\n }\n\n append(...nodes: ServerNode[]) {\n this.children.push(...nodes);\n }\n\n renderToString(): string {\n const children = this.children\n .map((child) => child.renderToString())\n .join(\"\");\n\n const propertiesStr = Object.keys(this.properties)\n .map((key) => `${key}=\"${this.properties[key]}\"`)\n .join(\" \");\n\n const gap = propertiesStr ? \" \" : \"\";\n\n return this.tagName\n ? `<${this.tagName}${gap}${propertiesStr}>${children}`\n : children;\n }\n}\n\nexport class TextNode {\n constructor(public nodeValue: string) {}\n renderToString() {\n return this.nodeValue;\n }\n}\n\nexport type ServerNode = ElementNode | TextNode;\n\ninterface FiberDomServer extends Fiber {\n el?: ServerNode;\n}\n\nexport const createOperator = (): Operator => {\n const createElement = (fiber: FiberDomServer) => {\n const { tag: type } = fiber;\n return isText(fiber)\n ? new TextNode(fiber.props.nodeValue + \"\")\n : new ElementNode(type as string);\n };\n\n const insertBefore = (\n containerFiber: FiberDomServer,\n insertElement: ServerNode,\n targetElement: ServerNode\n ) => {\n (containerFiber.el as ElementNode).insertBefore(\n insertElement,\n targetElement\n );\n };\n\n const firstChild = (fiber: FiberDomServer) =>\n (fiber.el as ElementNode).children[0] ?? null;\n\n const updateTextProperties = (fiber: FiberDomServer) => {\n (fiber.el as TextNode).nodeValue = fiber.props.nodeValue + \"\";\n };\n\n const updateElementProperties = (fiber: FiberDomServer) => {\n let { el, attrDiff } = fiber;\n\n for (const [key, newValue, oldValue] of attrDiff || []) {\n const newExist = !isNullish(newValue);\n const oldExist = !isNullish(oldValue);\n if (key === \"ref\") {\n oldExist && (oldValue.current = undefined);\n newExist && (newValue.current = el);\n } else if (isEvent(key)) {\n // nothing...\n } else {\n newExist\n ? ((el as ElementNode).properties[key] = newValue)\n : delete (el as ElementNode).properties[key];\n }\n }\n };\n\n return {\n nextElement() {},\n matchElement: () => false,\n remove() {},\n nextSibling() {},\n createElement,\n insertBefore,\n firstChild,\n updateTextProperties,\n updateElementProperties,\n };\n};\n"
},
{
"path": "packages/unis-dom/tsconfig.build.json",
"content": "{\n \"extends\": \"./tsconfig.json\",\n \"exclude\": [\"**/*.test.*\", \"**/__test__\"]\n}\n"
},
{
"path": "packages/unis-dom/tsconfig.json",
"content": "{\n \"extends\": \"../../tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"build\"\n },\n \"include\": [\"src\"]\n}\n"
},
{
"path": "packages/unis-dom/vitest.config.ts",
"content": "import { defineConfig } from \"vitest/config\";\nimport { unisPreset } from \"@unis/vite-preset\";\n\nexport default defineConfig({\n plugins: [unisPreset()],\n test: {\n include: [\"**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}\"],\n coverage: {\n reporter: [\"text\", \"json\", \"html\"],\n },\n },\n});\n"
},
{
"path": "packages/unis-example/.gitignore",
"content": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\nlerna-debug.log*\n\n# Diagnostic reports (https://nodejs.org/api/report.html)\nreport.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json\n\n# Runtime data\npids\n*.pid\n*.seed\n*.pid.lock\n\n# Directory for instrumented libs generated by jscoverage/JSCover\nlib-cov\n\n# Coverage directory used by tools like istanbul\ncoverage\n*.lcov\n\n# nyc test coverage\n.nyc_output\n\n# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)\n.grunt\n\n# Bower dependency directory (https://bower.io/)\nbower_components\n\n# node-waf configuration\n.lock-wscript\n\n# Compiled binary addons (https://nodejs.org/api/addons.html)\nbuild/Release\n\n# Dependency directories\nnode_modules/\njspm_packages/\n\n# TypeScript v1 declaration files\ntypings/\n\n# TypeScript cache\n*.tsbuildinfo\n\n# Optional npm cache directory\n.npm\n\n# Optional eslint cache\n.eslintcache\n\n# Microbundle cache\n.rpt2_cache/\n.rts2_cache_cjs/\n.rts2_cache_es/\n.rts2_cache_umd/\n\n# Optional REPL history\n.node_repl_history\n\n# Output of 'npm pack'\n*.tgz\n\n# Yarn Integrity file\n.yarn-integrity\n\n# dotenv environment variables file\n.env\n.env.test\n\n# parcel-bundler cache (https://parceljs.org/)\n.cache\n.parcel-cache\n\n# Next.js build output\n.next\n\n# Nuxt.js build / generate output\n.nuxt\ndist\nbuild\n\n# Gatsby files\n.cache/\n# Comment in the public line in if your project uses Gatsby and *not* Next.js\n# https://nextjs.org/blog/next-9-1#public-directory-support\n# public\n\n# vuepress build output\n.vuepress/dist\n\n# Serverless directories\n.serverless/\n\n# FuseBox cache\n.fusebox/\n\n# DynamoDB Local files\n.dynamodb/\n\n# TernJS port file\n.tern-port\n\n.DS_Store\n"
},
{
"path": "packages/unis-example/index.html",
"content": "\n\n \n Unis \n \n \n
\n
\n \n \n\n"
},
{
"path": "packages/unis-example/other.d.ts",
"content": "declare module \"*.css\";\n"
},
{
"path": "packages/unis-example/package.json",
"content": "{\n \"name\": \"@unis/unis-example\",\n \"version\": \"0.0.0\",\n \"description\": \"\",\n \"main\": \"index.js\",\n \"private\": \"true\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/anuoua/unis.git\"\n },\n \"author\": \"anuoua\",\n \"license\": \"MIT\",\n \"bugs\": {\n \"url\": \"https://github.com/anuoua/unis/issues\"\n },\n \"homepage\": \"https://github.com/anuoua/unis#readme\",\n \"dependencies\": {\n \"@unis/core\": \"workspace:^\",\n \"@unis/dom\": \"workspace:^\",\n \"@unis/router\": \"workspace:^\",\n \"@unis/transition\": \"workspace:^\"\n },\n \"devDependencies\": {\n \"@types/lodash\": \"^4.14.182\",\n \"@unis/vite-preset\": \"workspace:^\",\n \"autoprefixer\": \"^10.4.0\",\n \"postcss\": \"^8.3.11\",\n \"rollup-plugin-reassign\": \"^1.0.2\",\n \"tailwindcss\": \"^3.3.1\",\n \"vite\": \"^4.1.2\"\n }\n}\n"
},
{
"path": "packages/unis-example/postcss.config.js",
"content": "module.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n};\n"
},
{
"path": "packages/unis-example/src/Dialog.tsx",
"content": "import { createPortal, useProps, useRef } from \"@unis/core\";\nimport { Item } from \"./TodoItem\";\n\ninterface DialogProps {\n onClose: () => void;\n onConfirm: (item: Item) => void;\n item: Item | null;\n}\n\nexport function Dialog(props: DialogProps) {\n let { item, onClose, onConfirm } = useProps(props);\n\n const portalRef = useRef();\n\n const handleClose = (e: MouseEvent) => {\n if ((e.target as HTMLElement) === portalRef.current) {\n onClose();\n }\n };\n\n const handleConfirm = () => {\n onConfirm(item!);\n };\n\n return () =>\n createPortal(\n \n \n
\n
props.onClose()}>\n \n \n
\n
\n
\n \n {\" \"}\n Delete {item?.name} ?\n
\n \n
\n \n Confirm\n \n
\n
(todos);\n let [dialogVisible, setDialogVisible] = useState(false);\n let [titleVisible, setTitleVisible] = useState(true);\n let [currentItem, setCurrentItem] = useState- (null);\n\n const handleToggleTitle = () => {\n setTitleVisible(!titleVisible);\n setTimeout(() => {\n setTitleVisible(true);\n }, 200);\n };\n\n const handleAdd = (e: any) => {\n if (e.key !== \"Enter\") return;\n setTodoList([\n ...todoList,\n {\n id: ++count,\n name: e.target.value,\n editing: false,\n canceled: false,\n },\n ]);\n e.target.value = \"\";\n };\n\n const handleClose = () => {\n setDialogVisible(false);\n };\n\n const handleConfirm = (item: Item) => {\n setDialogVisible(false);\n setTodoList(todoList.filter((i) => i !== item));\n };\n\n const handleDelete = (item: Item) => {\n setCurrentItem(item);\n setTodoList(todoList.filter((i) => i !== item));\n // setDialogVisible(true);\n };\n\n return () => (\n
\n
\n \n TODO\n \n \n
\n
\n \n {todoList.map((i: any) => (\n \n \n ))}\n \n \n {dialogVisible && (\n
\n )}\n
\n {editing ? (\n \n ) : canceled ? (\n \n {name}\n \n ) : (\n \n {name}\n \n )}\n \n {canceled ? (\n \n \n \n \n \n );\n };\n});\n"
},
{
"path": "packages/unis-example/src/Welcome/index.module.css",
"content": ".msg {\n font-size: 50px;\n font-weight: bold;\n background: -webkit-linear-gradient(0deg,#e339bc 25%,#4f5b94);\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n transition: all .3s ease;\n}\n\n.msg:hover {\n cursor: pointer;\n transform: scale(1.2);\n background: -webkit-linear-gradient(0deg,#4f5b94 25%,#e339bc);\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}"
},
{
"path": "packages/unis-example/src/Welcome/index.tsx",
"content": "import { Link } from \"@unis/router\";\nimport s from \"./index.module.css\";\n\nexport const Welcome = () => {\n return () => (\n {msg}
: false);\n// };\n\nconst App = () => {\n return () => (\n \n
\n <>\n {/* \n \n );\n};\n\nrender(\n \n ,\n document.querySelector(\"#root\")!\n);\n"
},
{
"path": "packages/unis-example/tailwind.config.js",
"content": "module.exports = {\n content: [\"./public/**/*.html\", \"./src/**/*.{js,jsx,ts,tsx,vue}\"],\n theme: {\n extend: {},\n },\n variants: {\n extend: {},\n },\n plugins: [],\n};\n"
},
{
"path": "packages/unis-example/tsconfig.json",
"content": "{\n \"extends\": \"../../tsconfig.json\",\n \"include\": [\"src\", \"other.d.ts\"]\n}\n"
},
{
"path": "packages/unis-example/vite.config.js",
"content": "import { defineConfig } from \"vite\";\nimport { unisPreset } from \"@unis/vite-preset\";\n\nexport default defineConfig({\n plugins: [unisPreset()],\n});\n"
},
{
"path": "packages/unis-router/.gitignore",
"content": "build/\ncoverage/\ndist/"
},
{
"path": "packages/unis-router/README.md",
"content": "# Unis Router\n\nRouter for unis, inspire by [React Router V6](https://github.com/remix-run/react-router).\n\n## Install\n\n```shell\nnpm i @unis/router\n```\n\n## Usage\n\nUnis router's api is partial same as React Router V6.\n\nexample\n\n```javascript\nimport { BrowserRouter, Routes, Route, Outlet } from '@unis/router'\n\nconst Dashboard = () => {\n \n return () => (\n \n dashboard\n
\n )\n}\n\nconst App = () => {\n\n return () => (\n \n \n hello
} />\n \n \n )\n}\n\nrender(\n \n , document.querySelector('#app'))\n```\n\n\n"
},
{
"path": "packages/unis-router/package.json",
"content": "{\n \"name\": \"@unis/router\",\n \"version\": \"0.1.0\",\n \"description\": \"Unis router component\",\n \"main\": \"dist/index.js\",\n \"module\": \"dist/index.mjs\",\n \"types\": \"dist/index.d.ts\",\n \"typings\": \"dist/index.d.ts\",\n \"scripts\": {\n \"build\": \"rimraf build && rimraf dist && tsc -p tsconfig.json && rollup --config\",\n \"build:dev\": \"cross-env NODE_ENV=development pnpm build\",\n \"test\": \"vitest run --coverage\",\n \"test:watch\": \"vitest -w\"\n },\n \"exports\": {\n \".\": {\n \"require\": \"./dist/index.js\",\n \"import\": \"./dist/index.mjs\"\n }\n },\n \"keywords\": [\n \"unis\",\n \"router\"\n ],\n \"files\": [\n \"dist\"\n ],\n \"author\": \"anuoua\",\n \"peerDependencies\": {\n \"@unis/core\": \"workspace:^\"\n },\n \"license\": \"MIT\",\n \"bugs\": {\n \"url\": \"https://github.com/anuoua/unis/issues\"\n },\n \"homepage\": \"https://github.com/anuoua/unis/tree/main/packages/unis-router\",\n \"devDependencies\": {\n \"@rollup/plugin-node-resolve\": \"^15.0.2\",\n \"@types/node\": \"^18.15.11\",\n \"@unis/core\": \"workspace:^\",\n \"@unis/vite-preset\": \"workspace:^\",\n \"@vitest/coverage-c8\": \"^0.29.8\",\n \"cross-env\": \"^7.0.3\",\n \"esbuild\": \"^0.17.15\",\n \"rimraf\": \"^4.4.1\",\n \"rollup\": \"^3.20.2\",\n \"rollup-plugin-dts\": \"^5.3.0\",\n \"rollup-plugin-esbuild\": \"^5.0.0\",\n \"rollup-plugin-reassign\": \"^1.0.3\",\n \"typescript\": \"^5.0.3\",\n \"vitest\": \"^0.29.8\"\n },\n \"dependencies\": {\n \"history\": \"^5.3.0\"\n }\n}\n"
},
{
"path": "packages/unis-router/rollup.config.mjs",
"content": "import esbuild from \"rollup-plugin-esbuild\";\nimport dts from \"rollup-plugin-dts\";\nimport { defineConfig } from \"rollup\";\nimport { nodeResolve } from \"@rollup/plugin-node-resolve\";\nimport { reassign } from \"rollup-plugin-reassign\";\nimport { unisFns } from \"@unis/core\";\n\nconst configGen = (format) =>\n defineConfig({\n input: \"src/index.ts\",\n external: [/^@unis/, \"history\"],\n output: [\n {\n dir: \"dist\",\n entryFileNames: `index.${format === \"esm\" ? \"mjs\" : \"js\"}`,\n format,\n sourcemap: true,\n },\n ],\n plugins: [\n nodeResolve(),\n esbuild({\n sourceMap: true,\n target: \"esnext\",\n jsx: \"automatic\",\n jsxImportSource: \"@unis/core\",\n }),\n reassign({\n include: [\"**/*.(t|j)s?(x)\"],\n targetFns: {\n \"@unis/core\": unisFns,\n },\n }),\n ],\n });\n\nconst dtsRollup = () =>\n defineConfig({\n input: \"build/index.d.ts\",\n output: [{ file: \"dist/index.d.ts\", format: \"es\" }],\n plugins: [dts()],\n });\n\nconst config = [configGen(\"cjs\"), configGen(\"esm\"), dtsRollup()];\n\nexport default config;\n"
},
{
"path": "packages/unis-router/src/components/BrowserRouter.tsx",
"content": "import { useProps, useLayoutEffect, useState, useMemo } from \"@unis/core\";\nimport { createBrowserHistory, BrowserHistory } from \"history\";\nimport { LocationContext, RouterContext } from \"../context\";\n\nexport interface BrowserRouterProps {\n children?: JSX.Element | JSX.Element[];\n history?: BrowserHistory;\n basename?: string;\n}\n\nexport const BrowserRouter = (p: BrowserRouterProps) => {\n let { children, history, basename } = useProps(p);\n\n const historyInstance = history ?? createBrowserHistory();\n\n let [location, setLocation] = useState(historyInstance.location);\n\n const navigationContextValue = {\n basename: basename ?? \"\",\n history: historyInstance,\n };\n\n let locationContextValue = useMemo(\n () => ({ location }),\n () => [location]\n );\n\n useLayoutEffect(\n () => {\n const unlisten = historyInstance.listen(({ location }) => {\n setLocation(location);\n });\n return () => unlisten();\n },\n () => []\n );\n\n return () => (\n \n \n {children}\n \n \n );\n};\n"
},
{
"path": "packages/unis-router/src/components/Link.tsx",
"content": "import {\n AnchorHTMLAttributes,\n ElementAttrs,\n use,\n useContext,\n useProps,\n} from \"@unis/core\";\nimport { RouterContext } from \"../context\";\nimport { uTargetPath } from \"../hooks/uTargetPath\";\n\nexport type LinkProps = Partial<\n Omit, \"href\"> & {\n to: string;\n }\n>;\n\nexport const Link = (p: LinkProps) => {\n let { to, children, onClick, ...rest } = useProps(p);\n\n let { history } = useContext(RouterContext);\n\n let targetPath = use(uTargetPath(() => ({ to })));\n\n const handleJump = (e: MouseEvent) => {\n const target = (e.target as HTMLAnchorElement).target;\n if (\n e.button === 0 &&\n (!target || target === \"_self\") &&\n !(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)\n ) {\n if (history.location.pathname !== targetPath) {\n history.push(targetPath);\n } else {\n history.replace(targetPath);\n }\n e.preventDefault();\n }\n onClick?.(e);\n };\n\n return () => (\n \n {children}\n \n );\n};\n"
},
{
"path": "packages/unis-router/src/components/NavLink.tsx",
"content": "import { HTMLAttributes, use, useContext, useProps } from \"@unis/core\";\nimport { RouteContext } from \"../context\";\nimport { uTargetPath } from \"../hooks/uTargetPath\";\nimport { Link, LinkProps } from \"./Link\";\n\nexport type LinkStyle = (isActive: boolean) => HTMLAttributes[\"style\"];\nexport type LinkClassName = (isActive: boolean) => HTMLAttributes[\"className\"];\n\nexport type NavLinkProps = Omit & {\n style?: LinkStyle;\n className?: LinkClassName;\n};\n\nexport const NavLink = (p: NavLinkProps) => {\n let { style, className, to, ...rest } = useProps(p);\n let { matches } = useContext(RouteContext);\n let targetPath = use(uTargetPath(() => ({ to })));\n\n let isActive = use(() => !!matches.find((i) => i.pathname === targetPath));\n\n return () => (\n \n {element}\n \n ) : null;\n};\n"
},
{
"path": "packages/unis-router/src/components/Redirect.tsx",
"content": "import { useContext, useEffect, useProps } from \"@unis/core\";\nimport { RouteContext, RouterContext } from \"../context\";\nimport { resolvePath } from \"../utils\";\n\nexport interface RedirectProps {\n to?: string;\n replace?: boolean;\n}\n\nexport const Redirect = (p: RedirectProps) => {\n let { to, replace = true } = useProps(p);\n let { history } = useContext(RouterContext);\n let { route } = useContext(RouteContext);\n useEffect(\n () => {\n if (route) {\n const pathname = resolvePath(route.pathname!, to ?? \"\");\n replace ? history.replace(pathname) : history.push(pathname);\n }\n },\n () => []\n );\n return () => null;\n};\n"
},
{
"path": "packages/unis-router/src/components/Route.tsx",
"content": "import { RouteData } from \"../types\";\n\nexport type RouteProps = Omit & {\n children?: JSX.Element | JSX.Element[];\n};\n\nexport const Route = (p: RouteProps) => null;\n"
},
{
"path": "packages/unis-router/src/components/Routes.tsx",
"content": "import { cloneElement, FiberNode, use, useProps } from \"@unis/core\";\nimport { uRouter } from \"../hooks/uRouter\";\nimport { Route } from \"./Route\";\nimport { RouteData } from \"../types\";\n\nexport type RoutesProps = Omit & {\n children?: JSX.Element | JSX.Element[];\n};\n\nexport const Routes = (p: RoutesProps) => {\n let { children, path, element: incomeElement } = useProps(p);\n\n let realChildren = use(() => flatChildren(children));\n let routes = use(() => realChildren.map((node) => pick(node)));\n let element = use(\n uRouter(() => [\n {\n path,\n element: incomeElement,\n children: routes,\n } as RouteData,\n ])\n );\n\n function pick(node: FiberNode): RouteData {\n return {\n ...node.props,\n path: node.props.path,\n element: cloneElement(node.props.element),\n children: flatChildren(node.props.children).map(pick),\n };\n }\n\n function flatChildren(children: JSX.Element | JSX.Element[]) {\n return ([] as FiberNode[])\n .concat(children as FiberNode[])\n .filter((child) => child?.tag === Route);\n }\n\n return () => element;\n};\n"
},
{
"path": "packages/unis-router/src/context.tsx",
"content": "import { createContext } from \"@unis/core\";\nimport { BrowserHistory, Location } from \"history\";\nimport { MatchRoute } from \"./types\";\n\nexport interface RouteContextValue {\n route: MatchRoute;\n matches: MatchRoute[];\n}\n\nexport const RouteContext = createContext({\n route: undefined!,\n matches: [],\n});\n\nexport interface RouterContextValue {\n history: BrowserHistory;\n basename: string;\n}\n\nexport const RouterContext = createContext(undefined!);\n\nexport interface LocationContextValue {\n location: Location;\n}\n\nexport const LocationContext = createContext(undefined!);\n"
},
{
"path": "packages/unis-router/src/hooks/uHistory.ts",
"content": "import { useContext } from \"@unis/core\";\nimport { RouterContext } from \"../context\";\n\nexport const uHistory = () => {\n let { history } = useContext(RouterContext);\n return () => history!;\n};\n"
},
{
"path": "packages/unis-router/src/hooks/uLocation.ts",
"content": "import { use } from \"@unis/core\";\nimport { uHistory } from \"./uHistory\";\n\nexport const uLocation = () => {\n let { location } = use(uHistory());\n return () => location;\n};\n"
},
{
"path": "packages/unis-router/src/hooks/uParams.ts",
"content": "import { useContext } from \"@unis/core\";\nimport { RouteContext } from \"../context\";\n\nexport const uParams = >() => {\n let { route } = useContext(RouteContext);\n return () => route?.params as unknown as T;\n};\n"
},
{
"path": "packages/unis-router/src/hooks/uRouter.tsx",
"content": "import { use, useContext } from \"@unis/core\";\nimport { RouteContext, RouterContext } from \"../context\";\nimport { Outlet } from \"../components/Outlet\";\nimport { RouteData } from \"../types\";\nimport { matchRoutes } from \"../utils\";\n\nexport const uRouter = (configFn: () => RouteData[]) => {\n let routerData = use(configFn);\n let { history, basename } = useContext(RouterContext);\n\n let location = use(() => history?.location!);\n\n let wrapedRouterData = use(() => [\n {\n path: basename,\n element: \n \n );\n};\n"
},
{
"path": "packages/unis-router/src/hooks/uTargetPath.tsx",
"content": "import { use, useContext } from \"@unis/core\";\r\nimport { RouteContext } from \"../context\";\r\nimport { resolvePath } from \"../utils\";\r\n\r\nexport interface Options {\r\n to?: string;\r\n}\r\n\r\nexport const uTargetPath = (opts: () => Options) => {\r\n let { to } = use(opts);\r\n let { route } = useContext(RouteContext);\r\n\r\n let targetPath = use(() => resolvePath(route.pathname ?? \"\", to ?? \"\"));\r\n\r\n return () => targetPath;\r\n};\r\n"
},
{
"path": "packages/unis-router/src/index.ts",
"content": "export * from \"./components/BrowserRouter\";\nexport * from \"./context\";\nexport * from \"./components/Routes\";\nexport * from \"./components/Route\";\nexport * from \"./components/Outlet\";\nexport * from \"./components/Link\";\nexport * from \"./components/NavLink\";\nexport * from \"./components/Redirect\";\nexport * from \"./hooks/uHistory\";\nexport * from \"./hooks/uRouter\";\nexport * from \"./hooks/uLocation\";\nexport * from \"./hooks/uHistory\";\nexport * from \"./hooks/uParams\";\n"
},
{
"path": "packages/unis-router/src/types.ts",
"content": "export interface RouteData {\n path?: string;\n element?: JSX.Element;\n children?: RouteData[];\n}\n\nexport interface MatchRoute extends RouteData {\n pathname?: string;\n params?: Record;\n}\n"
},
{
"path": "packages/unis-router/src/utils.test.tsx",
"content": "import { expect, it } from \"vitest\";\nimport { RouteData } from \"./types\";\nimport { matchRoutes, resolvePath } from \"./utils\";\n\nconst getRoutes = (): RouteData[] => [\n {\n path: \"/\",\n children: [\n {\n path: \"home/:from/\",\n children: [\n { path: \"*\" },\n {\n path: \"post/:id\",\n },\n {\n path: \"post/1\",\n children: [\n {\n children: [{ path: \"xx\" }],\n },\n ],\n },\n ],\n },\n ],\n },\n];\n\nit(\"root match\", () => {\n const matchedRoutes = matchRoutes(\"/home/www\", getRoutes());\n expect(matchedRoutes).toMatchObject([\n { path: \"/\", params: {}, pathname: \"/\" },\n {\n path: \"home/:from/\",\n params: { from: \"www\" },\n pathname: \"/home/www\",\n },\n ]);\n});\n\nit(\"match test1\", () => {\n const matchedRoutes = matchRoutes(\"/home/www/post\", getRoutes());\n expect(matchedRoutes).toMatchObject([\n { path: \"/\", params: {}, pathname: \"/\" },\n {\n path: \"home/:from/\",\n params: { from: \"www\" },\n pathname: \"/home/www\",\n },\n { path: \"*\", params: { from: \"www\" }, pathname: \"/home/www/post\" },\n ]);\n});\n\nit(\"match test2\", () => {\n const matchedRoutes = matchRoutes(\"/home/www/post/1\", getRoutes());\n expect(matchedRoutes).toMatchObject([\n { path: \"/\", params: {}, pathname: \"/\" },\n {\n path: \"home/:from/\",\n params: { from: \"www\" },\n pathname: \"/home/www\",\n },\n {\n path: \"post/1\",\n params: { from: \"www\" },\n pathname: \"/home/www/post/1\",\n },\n { params: { from: \"www\" }, pathname: \"/home/www/post/1\" },\n ]);\n});\n\nit(\"match test3\", () => {\n const matchedRoutes = matchRoutes(\"/home/www/post/2\", getRoutes());\n expect(matchedRoutes).toMatchObject([\n { path: \"/\", params: {}, pathname: \"/\" },\n {\n path: \"home/:from/\",\n params: { from: \"www\" },\n pathname: \"/home/www\",\n },\n {\n path: \"post/:id\",\n params: { from: \"www\", id: \"2\" },\n pathname: \"/home/www/post/2\",\n },\n ]);\n});\n\nit(\"match test4\", () => {\n const matchedRoutes = matchRoutes(\"/home/www/post/1/x\", getRoutes());\n expect(matchedRoutes).toMatchObject([\n { path: \"/\", params: {}, pathname: \"/\" },\n {\n path: \"home/:from/\",\n params: { from: \"www\" },\n pathname: \"/home/www\",\n },\n {\n path: \"*\",\n params: { from: \"www\" },\n pathname: \"/home/www/post/1/x\",\n },\n ]);\n});\n\nit(\"match test5\", () => {\n const matchedRoutes = matchRoutes(\"/home/www/post/1/xx\", getRoutes());\n expect(matchedRoutes).toMatchObject([\n { path: \"/\", params: {}, pathname: \"/\" },\n {\n path: \"home/:from/\",\n params: { from: \"www\" },\n pathname: \"/home/www\",\n },\n {\n path: \"post/1\",\n params: { from: \"www\" },\n pathname: \"/home/www/post/1\",\n },\n {\n params: { from: \"www\" },\n pathname: \"/home/www/post/1\",\n },\n {\n path: \"xx\",\n params: { from: \"www\" },\n pathname: \"/home/www/post/1/xx\",\n },\n ]);\n});\n\nit(\"match test6\", () => {\n const matchedRoutes = matchRoutes(\"/app/home/www/post/1/x\", getRoutes(), [\n { path: \"/app\" },\n ]);\n expect(matchedRoutes).toMatchObject([\n { path: \"/app\", params: {}, pathname: \"/app\" },\n { path: \"/\", params: {}, pathname: \"/app\" },\n {\n path: \"home/:from/\",\n params: { from: \"www\" },\n pathname: \"/app/home/www\",\n },\n {\n path: \"*\",\n params: { from: \"www\" },\n pathname: \"/app/home/www/post/1/x\",\n },\n ]);\n});\n\nit(\"resolvePath\", () => {\n const path = resolvePath(\"/home/c\", \"../a\");\n expect(path).toBe(\"/a\");\n const path2 = resolvePath(\"/home/c\", \"./a\");\n expect(path2).toBe(\"/home/a\");\n const path3 = resolvePath(\"/home/c\", \"/a\");\n expect(path3).toBe(\"/a\");\n});\n"
},
{
"path": "packages/unis-router/src/utils.ts",
"content": "import { MatchRoute, RouteData } from \"./types\";\n\nconst SLASH = \"/\";\nconst DOT = \".\";\n\nconst trimSlash = (str: string) => {\n const reg = new RegExp(`^[${SLASH}${DOT}]*`);\n const reg2 = new RegExp(`[${SLASH}${DOT}]*$`);\n return str.replace(reg, \"\").replace(reg2, \"\");\n};\n\nconst split = (path: string) =>\n trimSlash(path) ? trimSlash(path).split(SLASH) : [];\n\nconst analysePath = (locationPathname: string, routePath: string) => {\n const locationChunks = split(locationPathname);\n const routeChunks = split(routePath);\n\n const params: Record = {};\n\n for (let i = 0; i < routeChunks.length; i++) {\n const routeChunk = routeChunks[i];\n if (routeChunk.startsWith(\":\")) {\n params[routeChunk.slice(1)] = locationChunks[i];\n }\n }\n\n return {\n params,\n pathname:\n SLASH +\n (locationChunks\n .slice(\n 0,\n routeChunks?.at(-1) === \"*\" ? undefined : routeChunks?.length ?? 0\n )\n .join(SLASH) ?? \"\"),\n };\n};\n\nconst testPath = (\n locationPathname: string,\n routePath: string,\n final = false\n) => {\n const locationChunks = split(locationPathname);\n const routeChunks = split(routePath);\n\n for (let i = 0; i < routeChunks.length; i++) {\n const routeChunk = routeChunks[i]!;\n const locationChunk = locationChunks[i];\n\n if (\n !locationChunk ||\n (!routeChunk.startsWith(\":\") &&\n routeChunk !== \"*\" &&\n routeChunk !== locationChunk)\n ) {\n return false;\n }\n }\n\n if (final && locationChunks.length > routeChunks.length) {\n return routeChunks.at(-1) === \"*\";\n }\n\n return true;\n};\n\nconst getScore = (locationPathname: string, routeChain: RouteData[]) => {\n const routePath = resolveRoutesPath(routeChain);\n const locationChunks = split(locationPathname);\n const routeChunks = split(routePath);\n let score = 0;\n\n routeChunks.forEach((chunk, index) => {\n let base = 10 ^ ((locationChunks.length ?? 0) - index);\n if (chunk === \"*\") score += 1 * base;\n if (chunk.startsWith(\":\")) score += 2 * base;\n if (chunk === locationChunks[index]) score += 3 * base;\n });\n return score;\n};\n\nconst resolveRoutesPath = (routes: RouteData[]) =>\n routes.reduce((pre, cur) => {\n const path = trimSlash(cur.path ?? \"\");\n return `${pre}${path ? SLASH + path : \"\"}`;\n }, \"\") || \"/\";\n\nconst isLocationEnd = (locationPathname: string, routePath: string) => {\n return split(locationPathname).length === split(routePath).length;\n};\n\nconst matchRoute = (\n locationPathname: string,\n route: RouteData,\n parentRouteChain: RouteData[] = []\n) => {\n const routeStack: RouteData[] = parentRouteChain;\n let matchedRouteChains: RouteData[][] = [];\n\n const walk = (route: RouteData) => {\n const routeChain = [...routeStack, route];\n const routePath = resolveRoutesPath(routeChain);\n const isEnd = (route.children?.length ?? 0) === 0;\n const result = testPath(locationPathname, routePath, isEnd);\n\n if (result) {\n if (isEnd) {\n matchedRouteChains.push(routeChain);\n } else {\n const preChainSize = matchedRouteChains.length;\n route.children?.forEach((childRoute) => {\n routeStack.push(route);\n walk(childRoute);\n routeStack.pop();\n });\n const afterChainSize = matchedRouteChains.length;\n if (\n afterChainSize === preChainSize &&\n isLocationEnd(locationPathname, routePath)\n ) {\n matchedRouteChains.push(routeChain);\n }\n }\n }\n };\n\n walk(route);\n\n return matchedRouteChains;\n};\n\nexport const matchRoutes = (\n locationPathname: string,\n routes: RouteData[],\n parentRouteChain: RouteData[] = []\n) => {\n const matchedRouteChains: RouteData[][] = [];\n routes.forEach((route) => {\n matchedRouteChains.push(\n ...matchRoute(locationPathname, route, parentRouteChain)\n );\n });\n matchedRouteChains.sort((a, b) => {\n const result =\n getScore(locationPathname, b) - getScore(locationPathname, a);\n if (result !== 0) return result;\n return b.length - a.length;\n });\n const finalChain = matchedRouteChains.at(0) ?? [];\n if (finalChain) {\n finalChain.forEach((route, index) => {\n const subChain = finalChain.slice(0, index + 1);\n const { params, pathname } = analysePath(\n locationPathname,\n resolveRoutesPath(subChain)\n );\n (route as MatchRoute).params = params;\n (route as MatchRoute).pathname = pathname;\n });\n }\n return finalChain;\n};\n\nexport const resolvePath = (from: string, to: string) =>\n new URL(to, `http://x${from}`).pathname;\n"
},
{
"path": "packages/unis-router/tsconfig.json",
"content": "{\n \"extends\": \"../../tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"build\"\n },\n \"include\": [\"src\"]\n}"
},
{
"path": "packages/unis-router/vitest.config.ts",
"content": "import { defineConfig } from \"vitest/config\";\nimport { unisPreset } from \"@unis/vite-preset\";\n\nexport default defineConfig({\n plugins: [unisPreset()],\n test: {\n include: [\"**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}\"],\n coverage: {\n reporter: [\"text\", \"json\", \"html\"],\n },\n },\n});\n"
},
{
"path": "packages/unis-transition/.gitignore",
"content": "build/\ndist/"
},
{
"path": "packages/unis-transition/README.md",
"content": "# Unis Transition\n\nTransition component for unis inspired by `React Transition Group`.\n\n## Install\n\n```shell\nnpm i @unis/transition\n```\n\n## Usage\n\n```javascript\nimport { useState } from '@unis/unis';\nimport { CSSTransition, TransitionGroup } from '@unis/transition'\n\nconst App = () => {\n let [visible, setVisible] = useState(false);\n\n const handleToggle = () => {\n setVisible(!visible);\n }\n\n return () => (\n \n toggle \n \n \n hello\n
\n \n \n )\n}\n```\n\n```css\n.fade-appear {\n opacity: 0;\n}\n\n.fade-appear-active {\n opacity: 1;\n transition: all 0.4s ease;\n}\n\n.fade-appear-done {\n opacity: 1;\n}\n\n.fade-enter {\n opacity: 0;\n}\n\n.fade-enter-active {\n opacity: 1;\n transition: all 0.4s ease;\n}\n\n.fade-enter-done {\n opacity: 1;\n}\n\n.fade-exit {\n opacity: 1;\n}\n\n.fade-exit-active {\n opacity: 0;\n transition: all 0.4s ease;\n}\n\n.fade-exit-done {\n opacity: 0;\n}\n```\n\nOnline [demo](https://stackblitz.com/edit/vitejs-vite-4cfy2b) here\n\n## CSSTransition\n\nComponent API as close to `React Transition Group` as possible.\n\n### in\n\nShow the component.\n\ntype: `boolean`\ndefault: `false`\n\n### mountOnEnter\n\nBy default the child component is mounted on the first `in={true}`. you can set `mountOnEnter={false}` child component will be mounted immediately with parent component.\n\ntype: `boolean`\ndefault: `true`\n\n### unmountOnExit\n\nBy default the child component is unmounted after it finishes exiting. you can set `unmountOnExit={false}` child component stays mounted after it reaches the 'exited' state.\n\ntype: `boolean`\ndefault: `true`\n\n### classNames\n\ntype:\n\n```typescript\nstring | {\n appear?: string,\n appearActive?: string,\n appearDone?: string,\n enter?: string,\n enterActive?: string,\n enterDone?: string,\n exit?: string,\n exitActive?: string,\n exitDone?: string,\n}\n```\n\ndefault: `''`\n\nfor example `classNames=\"fade\"` it will apply classes below\n\n- `fade-appear`, `fade-appear-active`, `fade-appear-done`\n- `fade-enter`, `fade-enter-active`, `fade-enter-done`\n- `fade-exit`, `fade-exit-active`, `fade-exit-done`\n\n### onEnter\n\nCallback fired immediately after the 'enter' or 'appear' class is applied.\n\ntype: `Function(node: HtmlElement)`\n\n### onEntering\n\nCallback fired immediately after the 'enter-active' or 'appear-active' class is applied.\n\ntype: `Function(node: HtmlElement)`\n\n### onEntered\n\nCallback fired immediately after the 'enter' or 'appear' classes are removed and the done class is added to the DOM node.\n\ntype: `Function(node: HtmlElement)`\n\n### onExit\n\nCallback fired immediately after the 'exit' class is applied.\n\ntype: `Function(node: HtmlElement)`\n\n### onExiting\n\nCallback fired immediately after the 'exit-active' is applied.\n\ntype: `Function(node: HtmlElement)`\n\n### onExited\n\nCallback fired immediately after the 'exit' classes are removed and the exit-done class is added to the DOM node.\n\ntype: `Function(node?: HtmlElement)`\n\n## TransitionGroup\n\nEasy to use, just wrap on `CSSTransition` with key.\n\n```javascript\n\n {list.map((item, index) => (\n \n {item.name}
\n \n ))}\n \n```\n\n"
},
{
"path": "packages/unis-transition/package.json",
"content": "{\n \"name\": \"@unis/transition\",\n \"version\": \"0.1.0\",\n \"description\": \"Unis transition component\",\n \"main\": \"dist/index.js\",\n \"module\": \"dist/index.mjs\",\n \"types\": \"dist/index.d.ts\",\n \"typings\": \"dist/index.d.ts\",\n \"scripts\": {\n \"build\": \"rimraf build && rimraf dist && tsc -p tsconfig.json && rollup --config\",\n \"build:dev\": \"cross-env NODE_ENV=development pnpm build\"\n },\n \"exports\": {\n \".\": {\n \"require\": \"./dist/index.js\",\n \"import\": \"./dist/index.mjs\"\n }\n },\n \"keywords\": [\n \"transition\",\n \"animation\",\n \"unis\"\n ],\n \"files\": [\n \"dist\"\n ],\n \"author\": \"anuoua\",\n \"peerDependencies\": {\n \"@unis/core\": \"workspace:^\"\n },\n \"license\": \"MIT\",\n \"bugs\": {\n \"url\": \"https://github.com/anuoua/unis/issues\"\n },\n \"homepage\": \"https://github.com/anuoua/unis/tree/main/packages/unis-transition\",\n \"devDependencies\": {\n \"@rollup/plugin-node-resolve\": \"^15.0.2\",\n \"@unis/core\": \"workspace:^\",\n \"cross-env\": \"^7.0.3\",\n \"esbuild\": \"^0.17.15\",\n \"rimraf\": \"^4.4.1\",\n \"rollup\": \"^3.20.2\",\n \"rollup-plugin-dts\": \"^5.3.0\",\n \"rollup-plugin-esbuild\": \"^5.0.0\",\n \"rollup-plugin-reassign\": \"^1.0.3\",\n \"typescript\": \"^5.0.3\"\n }\n}\n"
},
{
"path": "packages/unis-transition/rollup.config.mjs",
"content": "import dts from \"rollup-plugin-dts\";\nimport esbuild from \"rollup-plugin-esbuild\";\nimport { defineConfig } from \"rollup\";\nimport { nodeResolve } from \"@rollup/plugin-node-resolve\";\nimport { reassign } from \"rollup-plugin-reassign\";\nimport { unisFns } from \"@unis/core\";\n\nconst configGen = (format) =>\n defineConfig({\n input: \"src/index.ts\",\n external: [/^@unis/],\n output: [\n {\n dir: \"dist\",\n entryFileNames: `index.${format === \"esm\" ? \"mjs\" : \"js\"}`,\n format,\n sourcemap: true,\n },\n ],\n plugins: [\n nodeResolve(),\n esbuild({\n sourceMap: true,\n target: \"esnext\",\n jsx: \"automatic\",\n jsxImportSource: \"@unis/core\",\n }),\n reassign({\n include: [\"**/*.(t|j)s?(x)\"],\n targetFns: {\n \"@unis/core\": unisFns,\n },\n }),\n ],\n });\n\nconst dtsRollup = () =>\n defineConfig({\n input: \"build/index.d.ts\",\n output: [{ file: \"dist/index.d.ts\", format: \"es\" }],\n plugins: [dts()],\n });\n\nconst config = [configGen(\"cjs\"), configGen(\"esm\"), dtsRollup()];\n\nexport default config;\n"
},
{
"path": "packages/unis-transition/src/CSSTransition.ts",
"content": "import { findEls, use, useLayoutEffect, useProps } from \"@unis/core\";\nimport { uInstance } from \"./hooks/uInstance\";\nimport {\n APPEARED,\n APPEARING,\n ENTERED,\n ENTERING,\n EXITED,\n EXITING,\n TransitionTimeout,\n uTransition,\n} from \"./hooks/uTransition\";\nimport { uWatch } from \"./hooks/uWatch\";\n\nexport interface TransitionProps {\n children: JSX.Element;\n classNames: string;\n timeout?: TransitionTimeout;\n in?: boolean;\n mountOnEnter?: boolean;\n unmountOnExit?: boolean;\n appear?: boolean;\n enter?: boolean;\n onEnter?: (el: HTMLElement) => void;\n onEntering?: (el: HTMLElement) => void;\n onEntered?: (el: HTMLElement) => void;\n onExit?: (el: HTMLElement) => void;\n onExiting?: (el: HTMLElement) => void;\n onExited?: (el?: HTMLElement) => void;\n}\n\nexport const CSSTransition = (p: TransitionProps) => {\n let {\n children,\n timeout,\n in: inProp,\n classNames,\n unmountOnExit,\n mountOnEnter,\n appear,\n enter,\n onEnter,\n onEntering,\n onEntered,\n onExit,\n onExiting,\n onExited,\n } = useProps(p);\n\n let [instance] = use(uInstance());\n\n let { childrenState, status } = use(\n uTransition(() => ({\n in: inProp,\n timeout,\n enter,\n unmountOnExit,\n mountOnEnter,\n appear,\n }))\n );\n\n let currentChildren = use(() => (childrenState ? children : null));\n\n let cls = use(() => ({\n appear: `${classNames}-appear`,\n appearActive: `${classNames}-appear-active`,\n appearDone: `${classNames}-appear-done`,\n enter: `${classNames}-enter`,\n enterActive: `${classNames}-enter-active`,\n enterDone: `${classNames}-enter-done`,\n exit: `${classNames}-exit`,\n exitActive: `${classNames}-exit-active`,\n exitDone: `${classNames}-exit-done`,\n }));\n\n let el: HTMLElement | undefined;\n\n const getElement = () => {\n const els = findEls(instance, true).filter(\n (el) => el instanceof HTMLElement\n ) as HTMLElement[];\n return els[0] as HTMLElement | undefined;\n };\n\n const clearAll = () => {\n if (!el) return;\n el.classList.remove(\n cls.appear,\n cls.appearActive,\n cls.appearDone,\n cls.enter,\n cls.enterActive,\n cls.enterDone,\n cls.exit,\n cls.exitActive,\n cls.exitDone\n );\n };\n\n const entered = (appear: boolean) => {\n if (!el) return;\n clearAll();\n el.classList.add(appear ? cls.appearDone : cls.enterDone);\n onEntered?.(el);\n };\n\n const exited = () => {\n if (el) {\n clearAll();\n el.classList.add(cls.exitDone);\n }\n onExited?.(el);\n };\n\n const entering = (reflow = false, apear: boolean) => {\n if (!el) return;\n\n clearAll();\n\n el.classList.add(apear ? cls.appear : cls.enter);\n\n onEnter?.(el);\n\n reflow && forceReflow(el);\n\n clearAll();\n\n el.classList.add(apear ? cls.appearActive : cls.enterActive);\n\n onEntering?.(el);\n };\n\n const exiting = (reflow = false) => {\n if (!el) return;\n\n clearAll();\n\n el.classList.add(cls.exit);\n\n onExit?.(el);\n\n reflow && forceReflow(el);\n\n clearAll();\n\n el.classList.add(cls.exitActive);\n\n onExiting?.(el);\n };\n\n useLayoutEffect(\n () => {\n el = getElement();\n },\n () => [status, inProp]\n );\n\n uWatch(\n (current, previous) => {\n switch (current) {\n case APPEARING:\n entering(previous !== EXITING, true);\n break;\n case APPEARED:\n entered(true);\n break;\n case ENTERING:\n entering(previous !== EXITING, false);\n break;\n case EXITING:\n exiting(previous !== ENTERING);\n break;\n case ENTERED:\n entered(false);\n break;\n case EXITED:\n exited();\n break;\n }\n },\n () => [status]\n );\n\n return () => currentChildren;\n};\n\nconst forceReflow = (el: HTMLElement) => el.scrollTop;\n"
},
{
"path": "packages/unis-transition/src/TransitionGroup.ts",
"content": "import { FiberNode, use, useEffect, useProps, useState } from \"@unis/core\";\nimport { CSSTransition } from \"./CSSTransition\";\n\nexport interface TransitionGroupProps {\n children: JSX.Element | JSX.Element[];\n}\n\nexport const TransitionGroup = (p: TransitionGroupProps) => {\n let { children } = useProps(p);\n\n let [transitionChildren, setTransitionChildren] = useState([]);\n\n let flatChildren = use(() =>\n ([] as FiberNode[])\n .concat(children as unknown as FiberNode)\n .filter((child) => child.tag === CSSTransition)\n );\n\n let childrenKeys = use(() =>\n flatChildren.map((child) => child.props.key).join(\",\")\n );\n\n const remove = (key: string) => {\n setTransitionChildren(\n transitionChildren.filter((child) => child.props.key !== key)\n );\n };\n\n const handleChildren = () => {\n const flatMap: Record = {};\n flatChildren.forEach((child) => {\n flatMap[child.props.key] = child;\n });\n\n const transitionMap: Record = {};\n transitionChildren.forEach((child) => {\n transitionMap[child.props.key] = child;\n });\n\n const newFlatChildren = flatChildren.map((child) => {\n const existingNode = transitionMap[child.props.key];\n if (existingNode) return existingNode;\n const newChild = { ...child };\n const originProps = newChild.props;\n const onExited = newChild.props.onExited;\n newChild.props = {\n ...originProps,\n in: true,\n onExited: (...args: unknown[]) => {\n onExited?.(...args);\n remove(originProps.key);\n },\n };\n return newChild;\n });\n\n transitionChildren.forEach((child, index) => {\n const newChild = { ...child };\n if (!flatMap[newChild.props.key]) {\n newChild.props = {\n ...newChild.props,\n in: false,\n };\n newFlatChildren.splice(index, 0, newChild);\n }\n });\n\n setTransitionChildren(newFlatChildren);\n };\n\n useEffect(\n () => {\n handleChildren();\n },\n () => [childrenKeys]\n );\n\n return () => transitionChildren;\n};\n"
},
{
"path": "packages/unis-transition/src/hooks/uInstance.ts",
"content": "import { Fiber, use } from \"@unis/core\";\n\nexport const uInstance = () => {\n let instance = use((WF: Fiber) => WF);\n return () => [instance];\n};\n"
},
{
"path": "packages/unis-transition/src/hooks/uTransition.ts",
"content": "import { use, useEffect, useState } from \"@unis/core\";\n\nexport const UNMOUNTED = \"unmounted\";\nexport const APPEARING = \"appearing\";\nexport const APPEARED = \"appeared\";\nexport const ENTERING = \"entering\";\nexport const ENTERED = \"entered\";\nexport const EXITING = \"exiting\";\nexport const EXITED = \"exited\";\n\nexport type TimeoutObject = {\n appear?: number;\n enter?: number;\n exit?: number;\n};\n\nexport type TransitionTimeout = number | TimeoutObject;\n\nexport interface uTransitionProps {\n in?: boolean;\n enter?: boolean;\n unmountOnExit?: boolean;\n mountOnEnter?: boolean;\n appear?: boolean;\n timeout?: TransitionTimeout;\n}\n\nexport const uTransition = (optsFn: () => uTransitionProps) => {\n let {\n in: inProp = false,\n enter = true,\n unmountOnExit = true,\n mountOnEnter = true,\n timeout = 0,\n appear = false,\n } = use(optsFn);\n\n let timer: number;\n let mounted = false;\n\n let realMountOnEnter = use(() => (unmountOnExit ? true : mountOnEnter));\n let timeoutObject = use(() => {\n if (typeof timeout === \"number\") {\n return {\n appear: timeout,\n enter: timeout,\n exit: timeout,\n } as TimeoutObject;\n } else {\n const enter = timeout.enter ?? 0;\n return {\n appear: enter,\n enter,\n exit: timeout.exit ?? 0,\n } as TimeoutObject;\n }\n });\n\n let [childrenState, setChildrenState] = useState(\n !realMountOnEnter ? true : inProp\n );\n\n let [initialStatus] = useState(\n childrenState && appear && inProp\n ? enter\n ? APPEARING\n : ENTERED\n : UNMOUNTED\n );\n\n useEffect(\n () => {\n if (childrenState && initialStatus === APPEARING) {\n setTimer(timeoutObject.appear!);\n }\n },\n () => []\n );\n\n let [status, setStatus] = useState(initialStatus);\n\n const switchChildren = () => {\n if (status === ENTERING) setStatus(ENTERED);\n if (status === EXITING) setStatus(EXITED);\n if (status === APPEARING) setStatus(APPEARED);\n setChildrenState(inProp ? true : !unmountOnExit);\n };\n\n function setTimer(statusTimeout: number) {\n clearTimeout(timer);\n timer = setTimeout(() => {\n switchChildren();\n }, statusTimeout);\n }\n\n useEffect(\n () => {\n if (!mounted) {\n mounted = true;\n return;\n }\n if (inProp) {\n if (!enter) return setStatus(ENTERED);\n setStatus(ENTERING);\n setChildrenState(true);\n setTimer(timeoutObject.enter!);\n } else {\n setStatus(EXITING);\n setTimer(timeoutObject.exit!);\n }\n },\n () => [inProp]\n );\n\n return () => ({\n childrenState,\n status,\n });\n};\n"
},
{
"path": "packages/unis-transition/src/hooks/uUpdate.ts",
"content": "import { useReducer } from \"@unis/core\";\n\nexport const uUpdate = () => {\n let [, dispatch] = useReducer((a) => a + 1, 0);\n\n const update = () => dispatch(undefined);\n\n return () => [update];\n};\n"
},
{
"path": "packages/unis-transition/src/hooks/uWatch.ts",
"content": "import { use, useLayoutEffect } from \"@unis/core\";\n\nexport const uWatch = (\n handler: (currentValue: T, previousValue: T | undefined) => void,\n depsFn: () => [T]\n) => {\n let [value] = use(depsFn);\n\n let preValue: T | undefined = undefined;\n\n useLayoutEffect(\n () => {\n handler(value, preValue);\n preValue = value;\n },\n () => [value]\n );\n};\n"
},
{
"path": "packages/unis-transition/src/index.ts",
"content": "export * from \"./CSSTransition\";\nexport * from \"./TransitionGroup\";\nexport * from \"./hooks/uTransition\";\n"
},
{
"path": "packages/unis-transition/tsconfig.json",
"content": "{\n \"extends\": \"../../tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"build\"\n },\n \"include\": [\"src\"]\n}"
},
{
"path": "packages/unis-vite-preset/.gitignore",
"content": "build/"
},
{
"path": "packages/unis-vite-preset/README.md",
"content": "# Unis Vite Preset\n\nUnis develop preset for vite.\n\n## Install\n\n```shell\nnpm add -D @unis/vite-preset\n```\n\n## Usage\n\nvite.config.js\n\n```javascript\nimport { defineConfig } from \"vite\";\nimport { unisPreset } from '@unis/vite-preset'\n\nexport default defineConfig({\n plugins: [\n unisPreset()\n ]\n});\n```\n\n"
},
{
"path": "packages/unis-vite-preset/package.json",
"content": "{\n \"name\": \"@unis/vite-preset\",\n \"version\": \"0.1.0\",\n \"description\": \"Unis vite preset\",\n \"main\": \"build/index.js\",\n \"module\": \"build/index.mjs\",\n \"types\": \"build/index.d.ts\",\n \"typings\": \"build/index.d.ts\",\n \"scripts\": {\n \"build\": \"rimraf build && rollup --config && tsc\",\n \"build:dev\": \"cross-env NODE_ENV=development pnpm build\"\n },\n \"exports\": {\n \".\": {\n \"require\": \"./build/index.js\",\n \"import\": \"./build/index.mjs\"\n }\n },\n \"keywords\": [\n \"vite\",\n \"preset\",\n \"unis\"\n ],\n \"files\": [\n \"build\"\n ],\n \"author\": \"anuoua\",\n \"peerDependencies\": {\n \"@unis/core\": \"workspace:^\",\n \"vite\": \"^4.2.1\"\n },\n \"license\": \"MIT\",\n \"bugs\": {\n \"url\": \"https://github.com/anuoua/unis/issues\"\n },\n \"homepage\": \"https://github.com/anuoua/unis/tree/main/packages/unis-vite-preset\",\n \"dependencies\": {\n \"@callback-reassign/rollup-plugin\": \"^0.0.1\"\n },\n \"devDependencies\": {\n \"@rollup/plugin-node-resolve\": \"^13.0.6\",\n \"@unis/core\": \"workspace:^\",\n \"cross-env\": \"^7.0.3\",\n \"esbuild\": \"^0.13.13\",\n \"rimraf\": \"^3.0.2\",\n \"rollup\": \"^2.72.0\",\n \"rollup-plugin-esbuild\": \"^4.6.0\",\n \"typescript\": \"^4.4.4\",\n \"vite\": \"^4.2.1\"\n }\n}\n"
},
{
"path": "packages/unis-vite-preset/rollup.config.js",
"content": "import { defineConfig } from \"rollup\";\nimport { nodeResolve } from \"@rollup/plugin-node-resolve\";\nimport esbuild from \"rollup-plugin-esbuild\";\n\nconst configGen = (format) =>\n defineConfig({\n input: \"src/index.ts\",\n external: [/^@unis/, \"@callback-reassign/rollup-plugin\"],\n output: [\n {\n dir: \"build\",\n entryFileNames: `index.${format === \"esm\" ? \"mjs\" : \"js\"}`,\n format,\n sourcemap: true,\n },\n ],\n plugins: [\n nodeResolve(),\n esbuild({\n sourceMap: true,\n minify: process.env.NODE_ENV === \"development\" ? false : true,\n target: \"esnext\",\n }),\n ],\n });\n\nconst config = [configGen(\"cjs\"), configGen(\"esm\")];\n\nexport default config;\n"
},
{
"path": "packages/unis-vite-preset/src/index.ts",
"content": "import type { PluginOption } from \"vite\";\nimport { reassign } from \"@callback-reassign/rollup-plugin\";\nimport { unisFns } from \"@unis/core\";\n\nexport function unisPreset(): PluginOption[] {\n return [\n {\n name: \"unis-preset\",\n\n enforce: \"pre\",\n\n config(config) {\n return {\n esbuild: {\n jsx: \"automatic\",\n jsxImportSource: \"@unis/core\",\n ...config.esbuild,\n },\n };\n },\n },\n reassign({\n include: [\"**/*.(t|j)s?(x)\"],\n targetFns: {\n \"@unis/core\": unisFns,\n },\n }) as PluginOption,\n ];\n}\n"
},
{
"path": "packages/unis-vite-preset/tsconfig.json",
"content": "{\n \"extends\": \"../../tsconfig.json\",\n \"compilerOptions\": {\n \"emitDeclarationOnly\": true,\n \"declarationMap\": false,\n \"outDir\": \"build\"\n },\n \"include\": [\"src\"]\n}"
},
{
"path": "pnpm-workspace.yaml",
"content": "packages:\n - \"packages/**\"\n"
},
{
"path": "tsconfig.json",
"content": "{\n \"compilerOptions\": {\n \"target\": \"ESNext\",\n \"lib\": [\n \"DOM\",\n \"ESNext\"\n ],\n \"jsx\": \"react-jsx\",\n \"jsxImportSource\": \"@unis/core\",\n \"module\": \"ESNext\",\n \"moduleResolution\": \"node\",\n \"declaration\": true,\n \"emitDeclarationOnly\": true,\n \"sourceMap\": true,\n \"esModuleInterop\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"strict\": true,\n \"noUnusedLocals\": true,\n \"skipLibCheck\": false\n },\n}\n"
}
] ![](\"./assets/logo.svg\"){kind=logo}
\n![](\"./assets/bench.png\")
\n\n## 安装\n\n```bash\nnpm i @unis/core @unis/dom\n```\n\n## Vite 开发\n\n```shell\nnpm i vite @unis/vite-preset -D\n```\n\nvite.config.js\n\n```javascript\nimport { defineConfig } from \"vite\";\nimport { unisPreset } from \"@unis/vite-preset\";\n\nexport default defineConfig({\n plugins: [unisPreset()],\n});\n```\n\ntsconfig.json\n\n```json\n{\n \"compilerOptions\": {\n \"jsx\": \"react-jsx\",\n \"jsxImportSource\": \"@unis/core\"\n }\n}\n```\n\nindex.html\n\n```javascript\n\n ...\n \n \n \n \n\n```\n\nindex.tsx\n\n```javascript\nfunction App() {\n return () =>