├── .editorconfig ├── .github ├── CODEOWNERS ├── CODE_OF_CONDUCT.md ├── ISSUE_TEMPLATE │ ├── bug-report.yml │ ├── config.yml │ ├── documentation.yml │ └── feature-request.yml ├── PULL_REQUEST_TEMPLATE.md └── workflows │ ├── ci.yml │ ├── generate-readme.yml │ └── lint.yml ├── .gitignore ├── .markdownlint.json ├── .vscode └── settings.json ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── README.md.tmpl ├── examples.json ├── examples ├── microfrontend-react-app-react-components │ ├── README.md │ ├── mfe-diagram.dio │ ├── mfe-diagram.png │ ├── react-app │ │ ├── .env.example │ │ ├── .eslintrc.cjs │ │ ├── .gitignore │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ │ └── vite.svg │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.jsx │ │ │ ├── assets │ │ │ │ ├── react.svg │ │ │ │ └── saw-wallpaper.jpg │ │ │ ├── hooks │ │ │ │ ├── useLazyComponent.jsx │ │ │ │ └── useTrivia.jsx │ │ │ ├── index.css │ │ │ ├── main.jsx │ │ │ ├── pages │ │ │ │ └── Trivia.jsx │ │ │ ├── services │ │ │ │ └── triviaFetch.jsx │ │ │ └── store │ │ │ │ └── triviaStore.jsx │ │ └── vite.config.js │ └── react-components │ │ ├── .eslintrc.cjs │ │ ├── .gitignore │ │ ├── .storybook │ │ ├── main.js │ │ └── preview.jsx │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ └── vite.svg │ │ ├── src │ │ ├── App.jsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── components │ │ │ ├── Card │ │ │ │ ├── Card.stories.js │ │ │ │ └── index.jsx │ │ │ ├── CustomButton │ │ │ │ ├── CustomButton.stories.js │ │ │ │ └── index.jsx │ │ │ ├── Header │ │ │ │ └── index.jsx │ │ │ ├── Item │ │ │ │ ├── Item.stories.js │ │ │ │ └── index.jsx │ │ │ └── Select │ │ │ │ ├── Select.stories.js │ │ │ │ └── index.jsx │ │ └── main.jsx │ │ └── vite.config.js ├── microfrontend-react-shell-react-app-shared-routing │ ├── README.md │ ├── container │ │ ├── .env.example │ │ ├── config │ │ │ ├── webpack.common.js │ │ │ ├── webpack.dev.js │ │ │ └── webpack.prod.js │ │ ├── package.json │ │ ├── public │ │ │ └── index.html │ │ └── src │ │ │ ├── App.jsx │ │ │ ├── bootstrap.jsx │ │ │ ├── hooks │ │ │ └── useMountApp.jsx │ │ │ ├── main.js │ │ │ └── pages │ │ │ ├── FaqPage.jsx │ │ │ └── ReactApp.jsx │ ├── history-diagram.dio │ ├── history-diagram.png │ └── react-app │ │ ├── .env.example │ │ ├── .eslintrc.cjs │ │ ├── .gitignore │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ └── vite.svg │ │ ├── src │ │ ├── App.css │ │ ├── App.jsx │ │ ├── assets │ │ │ ├── react.svg │ │ │ └── saw-wallpaper.jpg │ │ ├── bootstrap.jsx │ │ ├── components │ │ │ ├── Button.jsx │ │ │ ├── Card.jsx │ │ │ ├── Header.jsx │ │ │ ├── Item.jsx │ │ │ └── Select.jsx │ │ ├── hooks │ │ │ └── useTrivia.jsx │ │ ├── index.css │ │ ├── main.jsx │ │ ├── pages │ │ │ ├── About.jsx │ │ │ ├── Home.jsx │ │ │ └── Results.jsx │ │ ├── services │ │ │ └── triviaFetch.jsx │ │ └── store │ │ │ └── triviaStore.jsx │ │ └── vite.config.js ├── microfrontend-react-shell-react-vue-app │ ├── README.md │ ├── container │ │ ├── config │ │ │ ├── webpack.common.js │ │ │ ├── webpack.dev.js │ │ │ └── webpack.prod.js │ │ ├── package.json │ │ ├── public │ │ │ └── index.html │ │ └── src │ │ │ ├── App.jsx │ │ │ ├── bootstrap.jsx │ │ │ ├── hooks │ │ │ ├── useReactApp.jsx │ │ │ └── useStore.jsx │ │ │ ├── main.js │ │ │ ├── pages │ │ │ ├── Home.jsx │ │ │ ├── ReactApp.jsx │ │ │ └── VueApp.jsx │ │ │ └── store │ │ │ └── index.js │ ├── mfe-diagram.dio │ ├── mfe-diagram.png │ ├── react-app │ │ ├── .env.example │ │ ├── .eslintrc.cjs │ │ ├── .gitignore │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ │ └── vite.svg │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.jsx │ │ │ ├── assets │ │ │ │ ├── react.svg │ │ │ │ └── saw-wallpaper.jpg │ │ │ ├── bootstrap.jsx │ │ │ ├── components │ │ │ │ ├── Button.jsx │ │ │ │ ├── Card.jsx │ │ │ │ ├── Header.jsx │ │ │ │ ├── Item.jsx │ │ │ │ └── Select.jsx │ │ │ ├── hooks │ │ │ │ └── useTrivia.jsx │ │ │ ├── index.css │ │ │ ├── main.jsx │ │ │ ├── pages │ │ │ │ └── Home.jsx │ │ │ ├── services │ │ │ │ └── triviaFetch.jsx │ │ │ └── store │ │ │ │ └── triviaStore.jsx │ │ └── vite.config.js │ └── vue-app │ │ ├── .env.example │ │ ├── .gitignore │ │ ├── .vscode │ │ └── extensions.json │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ └── vite.svg │ │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── vue.svg │ │ ├── bootstrap.js │ │ ├── components │ │ │ └── Phrase.vue │ │ ├── main.js │ │ ├── pages │ │ │ └── Results.vue │ │ └── style.css │ │ └── vite.config.js ├── million-poc-performance │ ├── .editorconfig │ ├── .env.example │ ├── .eslintignore │ ├── .eslintrc │ ├── .eslintrc.js │ ├── .gitignore │ ├── .husky │ │ ├── pre-commit │ │ └── pre-push │ ├── .markdownlint.json │ ├── .node-version │ ├── .prettierignore │ ├── .prettierrc.js │ ├── README.md │ ├── docs │ │ ├── COMPONENTS_AND_STYLING.md │ │ ├── PERFORMANCE.md │ │ ├── PROJECT_CONFIGURATION.md │ │ ├── PROJECT_STRUCTURE.md │ │ ├── README.md │ │ └── STATE_MANAGEMENT.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── public │ │ └── favicon.ico │ ├── src │ │ ├── App.tsx │ │ ├── components │ │ │ ├── Item │ │ │ │ ├── ItemBlock.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── styles.scss │ │ │ ├── Loading │ │ │ │ ├── Loading.tsx │ │ │ │ ├── index.ts │ │ │ │ └── loader.scss │ │ │ └── TreeNode │ │ │ │ ├── TreeNode.tsx │ │ │ │ ├── TreeNodeBlock.tsx │ │ │ │ └── styles.css │ │ ├── global.d.ts │ │ ├── hooks │ │ │ └── useRequestAnimationFrame.ts │ │ ├── main.tsx │ │ ├── pages │ │ │ ├── MillionPage │ │ │ │ ├── index.tsx │ │ │ │ └── styles.css │ │ │ ├── ReactPage │ │ │ │ ├── index.tsx │ │ │ │ └── styles.css │ │ │ ├── experiment001 │ │ │ │ ├── Base001.tsx │ │ │ │ ├── Million001.tsx │ │ │ │ └── styles.css │ │ │ ├── experiment002 │ │ │ │ ├── Million002-only-root-block.tsx │ │ │ │ ├── Million002-root-block-and-map-blocks.tsx │ │ │ │ ├── Million002-root-block-for-without-block.tsx │ │ │ │ └── styles.css │ │ │ ├── experiment003 │ │ │ │ ├── Base.tsx │ │ │ │ ├── Million.tsx │ │ │ │ └── styles.css │ │ │ └── experiment004 │ │ │ │ ├── Base.tsx │ │ │ │ ├── Million.tsx │ │ │ │ └── styles.css │ │ ├── report-web-vitals.ts │ │ ├── routes │ │ │ ├── AppRoutes.tsx │ │ │ └── api.ts │ │ ├── theme │ │ │ ├── global.css │ │ │ └── index.ts │ │ ├── utils │ │ │ └── index.ts │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── navigator-clipboard-api-integration │ ├── README.md │ ├── index.html │ ├── script.js │ └── styles.css ├── nextjs-with-swr-example │ ├── .eslintrc.json │ ├── .gitignore │ ├── .node-version │ ├── README.md │ ├── next.config.js │ ├── package-lock.json │ ├── package.json │ ├── pages │ │ └── api │ │ │ └── todos.ts │ ├── public │ │ ├── next.svg │ │ └── vercel.svg │ ├── src │ │ ├── app │ │ │ ├── favicon.ico │ │ │ ├── globals.css │ │ │ ├── layout.tsx │ │ │ ├── page.module.css │ │ │ ├── page.tsx │ │ │ └── style.css │ │ ├── hooks │ │ │ ├── _fetcher.ts │ │ │ ├── _mutator.ts │ │ │ ├── useGetTodos.ts │ │ │ └── useUpdateTodo.ts │ │ ├── lib │ │ │ └── db.ts │ │ └── types │ │ │ └── index.ts │ └── tsconfig.json ├── react-native-expo-router-with-shared-routes │ ├── .editorconfig │ ├── .eslintignore │ ├── .eslintrc.js │ ├── .gitignore │ ├── .markdownlint.json │ ├── .node-version │ ├── .prettierignore │ ├── .prettierrc.js │ ├── README.md │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── docs │ │ ├── COMPONENTS_AND_STYLING.md │ │ ├── PERFORMANCE.md │ │ ├── PROJECT_CONFIGURATION.md │ │ ├── README.md │ │ ├── SHARED_ROUTES.md │ │ └── STATE_MANAGEMENT.md │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── app │ │ │ ├── (tabs) │ │ │ │ ├── (home, feed, example) │ │ │ │ │ ├── _layout.tsx │ │ │ │ │ ├── example.tsx │ │ │ │ │ ├── feed.tsx │ │ │ │ │ ├── home.tsx │ │ │ │ │ └── post.tsx │ │ │ │ └── _layout.tsx │ │ │ ├── _layout.tsx │ │ │ ├── index.tsx │ │ │ └── profile.tsx │ │ └── components │ │ │ ├── Button.tsx │ │ │ └── SettingsButton.tsx │ └── tsconfig.json ├── react-native-expo-router │ ├── .editorconfig │ ├── .eslintignore │ ├── .eslintrc.js │ ├── .gitignore │ ├── .markdownlint.json │ ├── .node-version │ ├── .prettierignore │ ├── .prettierrc.js │ ├── README.md │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── docs │ │ ├── COMPONENTS_AND_STYLING.md │ │ ├── PERFORMANCE.md │ │ ├── PROJECT_CONFIGURATION.md │ │ ├── README.md │ │ └── STATE_MANAGEMENT.md │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── app │ │ │ ├── (auth) │ │ │ │ └── login.tsx │ │ │ ├── (tabs) │ │ │ │ ├── _layout.tsx │ │ │ │ ├── home.tsx │ │ │ │ └── profile.tsx │ │ │ ├── _layout.tsx │ │ │ ├── details │ │ │ │ └── [id].tsx │ │ │ └── index.tsx │ │ └── components │ │ │ └── Button.tsx │ └── tsconfig.json ├── react-security-best-practices │ └── README.md ├── react-vite-capacitor-example │ ├── .editorconfig │ ├── .env.example │ ├── .eslintignore │ ├── .eslintrc.js │ ├── .gitignore │ ├── .markdownlint.json │ ├── .node-version │ ├── .prettierignore │ ├── .prettierrc.js │ ├── README.md │ ├── docs │ │ ├── COMPONENTS_AND_STYLING.md │ │ ├── PERFORMANCE.md │ │ ├── PROJECT_CONFIGURATION.md │ │ ├── PROJECT_STRUCTURE.md │ │ ├── README.md │ │ └── STATE_MANAGEMENT.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── public │ │ └── favicon.ico │ ├── src │ │ ├── App.tsx │ │ ├── components │ │ │ ├── Animation │ │ │ │ ├── Cracked.tsx │ │ │ │ ├── cracked.css │ │ │ │ └── slicer.scss │ │ │ └── Loading │ │ │ │ ├── Loading.tsx │ │ │ │ ├── index.ts │ │ │ │ └── loader.scss │ │ ├── global.d.ts │ │ ├── main.tsx │ │ ├── pages │ │ │ ├── Landing.css │ │ │ └── Landing.tsx │ │ ├── report-web-vitals.ts │ │ ├── routes │ │ │ └── AppRoutes.tsx │ │ ├── theme │ │ │ └── index.ts │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── react-vite-electron-example │ ├── .editorconfig │ ├── .env.example │ ├── .eslintignore │ ├── .eslintrc.js │ ├── .gitignore │ ├── .markdownlint.json │ ├── .node-version │ ├── .prettierignore │ ├── .prettierrc.js │ ├── README.md │ ├── docs │ │ ├── COMPONENTS_AND_STYLING.md │ │ ├── PERFORMANCE.md │ │ ├── PROJECT_CONFIGURATION.md │ │ ├── PROJECT_STRUCTURE.md │ │ ├── README.md │ │ └── STATE_MANAGEMENT.md │ ├── electron │ │ └── main.js │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── public │ │ └── favicon.ico │ ├── src │ │ ├── App.tsx │ │ ├── components │ │ │ ├── Animation │ │ │ │ ├── Cracked.tsx │ │ │ │ ├── cracked.css │ │ │ │ └── slicer.scss │ │ │ └── Loading │ │ │ │ ├── Loading.tsx │ │ │ │ ├── index.ts │ │ │ │ └── loader.scss │ │ ├── global.d.ts │ │ ├── main.tsx │ │ ├── pages │ │ │ ├── Landing.css │ │ │ └── Landing.tsx │ │ ├── report-web-vitals.ts │ │ ├── routes │ │ │ └── AppRoutes.tsx │ │ ├── theme │ │ │ └── index.ts │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── seo-and-core-web-vitals │ └── README.md ├── state-management │ ├── .gitignore │ ├── .node-version │ ├── README.md │ ├── examples │ │ ├── api-react-query │ │ │ ├── .gitignore │ │ │ ├── index.html │ │ │ ├── package.json │ │ │ ├── postcss.config.js │ │ │ ├── public │ │ │ │ └── names.json │ │ │ ├── src │ │ │ │ ├── App.tsx │ │ │ │ ├── index.css │ │ │ │ ├── main.tsx │ │ │ │ ├── store.tsx │ │ │ │ └── vite-env.d.ts │ │ │ ├── tailwind.config.js │ │ │ ├── tsconfig.json │ │ │ ├── vite.config.ts │ │ │ └── yarn.lock │ │ ├── api-swr │ │ │ ├── .gitignore │ │ │ ├── index.html │ │ │ ├── package.json │ │ │ ├── postcss.config.js │ │ │ ├── public │ │ │ │ └── names.json │ │ │ ├── src │ │ │ │ ├── App.tsx │ │ │ │ ├── index.css │ │ │ │ ├── main.tsx │ │ │ │ ├── store.tsx │ │ │ │ └── vite-env.d.ts │ │ │ ├── tailwind.config.js │ │ │ ├── tsconfig.json │ │ │ ├── vite.config.ts │ │ │ └── yarn.lock │ │ ├── atomic-agilets │ │ │ ├── .gitignore │ │ │ ├── index.html │ │ │ ├── package.json │ │ │ ├── postcss.config.js │ │ │ ├── public │ │ │ │ └── names.json │ │ │ ├── src │ │ │ │ ├── App.tsx │ │ │ │ ├── index.css │ │ │ │ ├── main.tsx │ │ │ │ ├── store.ts │ │ │ │ └── vite-env.d.ts │ │ │ ├── tailwind.config.js │ │ │ ├── tsconfig.json │ │ │ ├── vite.config.ts │ │ │ └── yarn.lock │ │ ├── atomic-jotai │ │ │ ├── .gitignore │ │ │ ├── index.html │ │ │ ├── package.json │ │ │ ├── postcss.config.js │ │ │ ├── public │ │ │ │ └── names.json │ │ │ ├── src │ │ │ │ ├── App.tsx │ │ │ │ ├── index.css │ │ │ │ ├── main.tsx │ │ │ │ ├── store.tsx │ │ │ │ └── vite-env.d.ts │ │ │ ├── tailwind.config.js │ │ │ ├── tsconfig.json │ │ │ ├── vite.config.ts │ │ │ └── yarn.lock │ │ ├── atomic-recoil │ │ │ ├── .gitignore │ │ │ ├── index.html │ │ │ ├── package.json │ │ │ ├── postcss.config.js │ │ │ ├── public │ │ │ │ └── names.json │ │ │ ├── src │ │ │ │ ├── App.tsx │ │ │ │ ├── index.css │ │ │ │ ├── main.tsx │ │ │ │ ├── store.tsx │ │ │ │ └── vite-env.d.ts │ │ │ ├── tailwind.config.js │ │ │ ├── tsconfig.json │ │ │ ├── vite.config.ts │ │ │ └── yarn.lock │ │ ├── bidirectional-easy-state │ │ │ ├── .gitignore │ │ │ ├── index.html │ │ │ ├── package.json │ │ │ ├── postcss.config.js │ │ │ ├── public │ │ │ │ └── names.json │ │ │ ├── src │ │ │ │ ├── App.tsx │ │ │ │ ├── index.css │ │ │ │ ├── main.tsx │ │ │ │ ├── store.tsx │ │ │ │ └── vite-env.d.ts │ │ │ ├── tailwind.config.js │ │ │ ├── tsconfig.json │ │ │ ├── vite.config.ts │ │ │ └── yarn.lock │ │ ├── bidirectional-mobx-state-tree │ │ │ ├── .gitignore │ │ │ ├── index.html │ │ │ ├── package.json │ │ │ ├── postcss.config.js │ │ │ ├── public │ │ │ │ └── names.json │ │ │ ├── src │ │ │ │ ├── App.tsx │ │ │ │ ├── index.css │ │ │ │ ├── main.tsx │ │ │ │ ├── store.tsx │ │ │ │ └── vite-env.d.ts │ │ │ ├── tailwind.config.js │ │ │ ├── tsconfig.json │ │ │ ├── vite.config.ts │ │ │ └── yarn.lock │ │ ├── bidirectional-mobx │ │ │ ├── .gitignore │ │ │ ├── index.html │ │ │ ├── package.json │ │ │ ├── postcss.config.js │ │ │ ├── public │ │ │ │ └── names.json │ │ │ ├── src │ │ │ │ ├── App.tsx │ │ │ │ ├── index.css │ │ │ │ ├── main.tsx │ │ │ │ ├── store.tsx │ │ │ │ └── vite-env.d.ts │ │ │ ├── tailwind.config.js │ │ │ ├── tsconfig.json │ │ │ ├── vite.config.ts │ │ │ └── yarn.lock │ │ ├── bidirectional-valtio │ │ │ ├── .gitignore │ │ │ ├── index.html │ │ │ ├── package.json │ │ │ ├── postcss.config.js │ │ │ ├── public │ │ │ │ └── names.json │ │ │ ├── src │ │ │ │ ├── App.tsx │ │ │ │ ├── index.css │ │ │ │ ├── main.tsx │ │ │ │ ├── store.tsx │ │ │ │ └── vite-env.d.ts │ │ │ ├── tailwind.config.js │ │ │ ├── tsconfig.json │ │ │ ├── vite.config.ts │ │ │ └── yarn.lock │ │ ├── fsm-xstate │ │ │ ├── .gitignore │ │ │ ├── index.html │ │ │ ├── package.json │ │ │ ├── postcss.config.js │ │ │ ├── public │ │ │ │ └── names.json │ │ │ ├── src │ │ │ │ ├── App.tsx │ │ │ │ ├── index.css │ │ │ │ ├── main.tsx │ │ │ │ ├── store.tsx │ │ │ │ └── vite-env.d.ts │ │ │ ├── tailwind.config.js │ │ │ ├── tsconfig.json │ │ │ ├── vite.config.ts │ │ │ └── yarn.lock │ │ ├── hooks-constate │ │ │ ├── .gitignore │ │ │ ├── index.html │ │ │ ├── package.json │ │ │ ├── postcss.config.js │ │ │ ├── public │ │ │ │ └── names.json │ │ │ ├── src │ │ │ │ ├── App.tsx │ │ │ │ ├── index.css │ │ │ │ ├── main.tsx │ │ │ │ ├── store.tsx │ │ │ │ └── vite-env.d.ts │ │ │ ├── tailwind.config.js │ │ │ ├── tsconfig.json │ │ │ ├── vite.config.ts │ │ │ └── yarn.lock │ │ ├── hooks-context │ │ │ ├── .gitignore │ │ │ ├── index.html │ │ │ ├── package.json │ │ │ ├── postcss.config.js │ │ │ ├── public │ │ │ │ └── names.json │ │ │ ├── src │ │ │ │ ├── App.tsx │ │ │ │ ├── index.css │ │ │ │ ├── main.tsx │ │ │ │ ├── store.tsx │ │ │ │ └── vite-env.d.ts │ │ │ ├── tailwind.config.js │ │ │ ├── tsconfig.json │ │ │ ├── vite.config.ts │ │ │ └── yarn.lock │ │ ├── hooks-global-state │ │ │ ├── .gitignore │ │ │ ├── index.html │ │ │ ├── package.json │ │ │ ├── postcss.config.js │ │ │ ├── public │ │ │ │ └── names.json │ │ │ ├── src │ │ │ │ ├── App.tsx │ │ │ │ ├── index.css │ │ │ │ ├── main.tsx │ │ │ │ ├── store.tsx │ │ │ │ └── vite-env.d.ts │ │ │ ├── tailwind.config.js │ │ │ ├── tsconfig.json │ │ │ ├── vite.config.ts │ │ │ └── yarn.lock │ │ ├── hooks-hookstate │ │ │ ├── .gitignore │ │ │ ├── index.html │ │ │ ├── package.json │ │ │ ├── postcss.config.js │ │ │ ├── public │ │ │ │ └── names.json │ │ │ ├── src │ │ │ │ ├── App.tsx │ │ │ │ ├── index.css │ │ │ │ ├── main.tsx │ │ │ │ ├── store.tsx │ │ │ │ └── vite-env.d.ts │ │ │ ├── tailwind.config.js │ │ │ ├── tsconfig.json │ │ │ ├── vite.config.ts │ │ │ └── yarn.lock │ │ ├── hooks-prop-drilling │ │ │ ├── .gitignore │ │ │ ├── index.html │ │ │ ├── package.json │ │ │ ├── postcss.config.js │ │ │ ├── public │ │ │ │ └── names.json │ │ │ ├── src │ │ │ │ ├── App.tsx │ │ │ │ ├── index.css │ │ │ │ ├── main.tsx │ │ │ │ ├── store.tsx │ │ │ │ └── vite-env.d.ts │ │ │ ├── tailwind.config.js │ │ │ ├── tsconfig.json │ │ │ ├── vite.config.ts │ │ │ └── yarn.lock │ │ ├── hooks-teaful │ │ │ ├── .gitignore │ │ │ ├── index.html │ │ │ ├── package.json │ │ │ ├── postcss.config.js │ │ │ ├── public │ │ │ │ └── names.json │ │ │ ├── src │ │ │ │ ├── App.tsx │ │ │ │ ├── index.css │ │ │ │ ├── main.tsx │ │ │ │ ├── store.tsx │ │ │ │ └── vite-env.d.ts │ │ │ ├── tailwind.config.js │ │ │ ├── tsconfig.json │ │ │ ├── vite.config.ts │ │ │ └── yarn.lock │ │ ├── reactive-akita │ │ │ ├── .gitignore │ │ │ ├── index.html │ │ │ ├── package.json │ │ │ ├── postcss.config.js │ │ │ ├── public │ │ │ │ └── names.json │ │ │ ├── src │ │ │ │ ├── App.tsx │ │ │ │ ├── index.css │ │ │ │ ├── main.tsx │ │ │ │ ├── stopwatch.query.ts │ │ │ │ ├── stopwatch.service.ts │ │ │ │ ├── stopwatch.store.ts │ │ │ │ └── vite-env.d.ts │ │ │ ├── tailwind.config.js │ │ │ ├── tsconfig.json │ │ │ ├── vite.config.ts │ │ │ └── yarn.lock │ │ ├── reactive-effector │ │ │ ├── .gitignore │ │ │ ├── index.html │ │ │ ├── package.json │ │ │ ├── postcss.config.js │ │ │ ├── public │ │ │ │ └── names.json │ │ │ ├── src │ │ │ │ ├── App.tsx │ │ │ │ ├── index.css │ │ │ │ ├── main.tsx │ │ │ │ ├── store.tsx │ │ │ │ └── vite-env.d.ts │ │ │ ├── tailwind.config.js │ │ │ ├── tsconfig.json │ │ │ ├── vite.config.ts │ │ │ └── yarn.lock │ │ ├── reactive-rxjs │ │ │ ├── .gitignore │ │ │ ├── index.html │ │ │ ├── package.json │ │ │ ├── postcss.config.js │ │ │ ├── public │ │ │ │ └── names.json │ │ │ ├── src │ │ │ │ ├── App.tsx │ │ │ │ ├── index.css │ │ │ │ ├── main.tsx │ │ │ │ ├── store.tsx │ │ │ │ └── vite-env.d.ts │ │ │ ├── tailwind.config.js │ │ │ ├── tsconfig.json │ │ │ ├── vite.config.ts │ │ │ └── yarn.lock │ │ ├── reactive-storeon │ │ │ ├── .gitignore │ │ │ ├── index.html │ │ │ ├── package.json │ │ │ ├── postcss.config.js │ │ │ ├── public │ │ │ │ └── names.json │ │ │ ├── src │ │ │ │ ├── App.tsx │ │ │ │ ├── index.css │ │ │ │ ├── main.tsx │ │ │ │ ├── store.tsx │ │ │ │ └── vite-env.d.ts │ │ │ ├── tailwind.config.js │ │ │ ├── tsconfig.json │ │ │ ├── vite.config.ts │ │ │ └── yarn.lock │ │ ├── unidirectional-redux-toolkit │ │ │ ├── .gitignore │ │ │ ├── index.html │ │ │ ├── package.json │ │ │ ├── postcss.config.js │ │ │ ├── public │ │ │ │ └── names.json │ │ │ ├── src │ │ │ │ ├── App.tsx │ │ │ │ ├── index.css │ │ │ │ ├── main.tsx │ │ │ │ ├── store.tsx │ │ │ │ └── vite-env.d.ts │ │ │ ├── tailwind.config.js │ │ │ ├── tsconfig.json │ │ │ ├── vite.config.ts │ │ │ └── yarn.lock │ │ ├── unidirectional-rematch │ │ │ ├── .gitignore │ │ │ ├── index.html │ │ │ ├── package.json │ │ │ ├── postcss.config.js │ │ │ ├── public │ │ │ │ └── names.json │ │ │ ├── src │ │ │ │ ├── App.tsx │ │ │ │ ├── index.css │ │ │ │ ├── main.tsx │ │ │ │ ├── store.tsx │ │ │ │ └── vite-env.d.ts │ │ │ ├── tailwind.config.js │ │ │ ├── tsconfig.json │ │ │ ├── vite.config.ts │ │ │ └── yarn.lock │ │ ├── unidirectional-unistore │ │ │ ├── .gitignore │ │ │ ├── index.html │ │ │ ├── package.json │ │ │ ├── postcss.config.js │ │ │ ├── public │ │ │ │ └── names.json │ │ │ ├── src │ │ │ │ ├── App.tsx │ │ │ │ ├── index.css │ │ │ │ ├── main.tsx │ │ │ │ ├── store.tsx │ │ │ │ └── vite-env.d.ts │ │ │ ├── tailwind.config.js │ │ │ ├── tsconfig.json │ │ │ ├── vite.config.ts │ │ │ └── yarn.lock │ │ └── unidirectional-zustand │ │ │ ├── .gitignore │ │ │ ├── index.html │ │ │ ├── package.json │ │ │ ├── postcss.config.js │ │ │ ├── public │ │ │ └── names.json │ │ │ ├── src │ │ │ ├── App.tsx │ │ │ ├── index.css │ │ │ ├── main.tsx │ │ │ ├── store.tsx │ │ │ └── vite-env.d.ts │ │ │ ├── tailwind.config.js │ │ │ ├── tsconfig.json │ │ │ ├── vite.config.ts │ │ │ └── yarn.lock │ ├── package.json │ └── yarn.lock ├── styled-components-vs-tailwindcss │ ├── README.md │ └── images │ │ ├── comparative-001.png │ │ ├── comparative-002.png │ │ ├── comparative-003.png │ │ ├── comparative-004.png │ │ ├── styled-components-cls.png │ │ ├── styled-components-lighthouse.png │ │ ├── tailwind-cls.png │ │ └── tailwind-lighthouse.png └── the-ultimate-react-state-management-framework │ ├── README.md │ └── images │ └── logo.webp └── tools └── danger ├── .gitignore ├── .node-version ├── .nvmrc ├── dangerfile.ts ├── package-lock.json └── package.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | indent_style = space 8 | indent_size = 2 9 | end_of_line = lf 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | insert_final_newline = false 15 | trim_trailing_whitespace = false 16 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @ulises-jeremias @rpmolina 2 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | --- 2 | blank_issues_enabled: false 3 | contact_links: 4 | - name: 💬 General Question 5 | url: https://github.com/nanlabs/nancy.js/discussions/categories/q-a 6 | about: Please ask and answer questions as a discussion thread 7 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/documentation.yml: -------------------------------------------------------------------------------- 1 | name: "📕 Documentation Issue" 2 | description: Report an issue in the Reference documentation or Developer Guide 3 | title: "(short issue description)" 4 | labels: [documentation] 5 | assignees: [] 6 | body: 7 | - type: textarea 8 | id: description 9 | attributes: 10 | label: Describe the issue 11 | description: A clear and concise description of the issue. 12 | validations: 13 | required: true 14 | 15 | - type: textarea 16 | id: links 17 | attributes: 18 | label: Links 19 | description: | 20 | Include links to affected documentation page(s). 21 | validations: 22 | required: true 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | .pnp 6 | .pnp.js 7 | 8 | # testing 9 | coverage 10 | 11 | # next.js 12 | .next/ 13 | out/ 14 | build 15 | 16 | # misc 17 | .DS_Store 18 | *.pem 19 | 20 | # debug 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | .pnpm-debug.log* 25 | 26 | # local env files 27 | .env.local 28 | .env.development.local 29 | .env.test.local 30 | .env.production.local 31 | 32 | # turbo 33 | .turbo 34 | dist 35 | 36 | # Storybook 37 | out 38 | storybook-static/ 39 | -------------------------------------------------------------------------------- /.markdownlint.json: -------------------------------------------------------------------------------- 1 | { 2 | "MD041": false, 3 | "MD042": false, 4 | "MD004": false, 5 | "MD013": false, 6 | "MD033": false, 7 | "MD024": false, 8 | "MD045": false 9 | } 10 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules/typescript/lib" 3 | } 4 | -------------------------------------------------------------------------------- /examples/microfrontend-react-app-react-components/mfe-diagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nanlabs/frontend-reference/107c237e77d1e039c54d84b6b4e55ea0cc67863e/examples/microfrontend-react-app-react-components/mfe-diagram.png -------------------------------------------------------------------------------- /examples/microfrontend-react-app-react-components/react-app/.env.example: -------------------------------------------------------------------------------- 1 | VITE_API_TRIVIA_URL=https://the-trivia-api.com/v2 -------------------------------------------------------------------------------- /examples/microfrontend-react-app-react-components/react-app/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { browser: true, es2020: true }, 3 | extends: [ 4 | 'eslint:recommended', 5 | 'plugin:react/recommended', 6 | 'plugin:react/jsx-runtime', 7 | 'plugin:react-hooks/recommended', 8 | ], 9 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 10 | settings: { react: { version: '18.2' } }, 11 | plugins: ['react-refresh'], 12 | rules: { 13 | 'react-refresh/only-export-components': 'warn', 14 | }, 15 | } 16 | -------------------------------------------------------------------------------- /examples/microfrontend-react-app-react-components/react-app/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/microfrontend-react-app-react-components/react-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | ReactApp + ReactComponents 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/microfrontend-react-app-react-components/react-app/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { createTheme, ThemeProvider } from '@mui/material/styles'; 3 | import './App.css'; 4 | 5 | import Trivia from './pages/Trivia'; 6 | 7 | const theme = createTheme({ 8 | palette: { 9 | primary: { 10 | main: '#fff', 11 | }, 12 | secondary: { 13 | main: '#000', 14 | }, 15 | }, 16 | }); 17 | 18 | const App = () => { 19 | return ( 20 | 21 | 22 | 23 | ); 24 | }; 25 | 26 | export default App; 27 | -------------------------------------------------------------------------------- /examples/microfrontend-react-app-react-components/react-app/src/assets/saw-wallpaper.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nanlabs/frontend-reference/107c237e77d1e039c54d84b6b4e55ea0cc67863e/examples/microfrontend-react-app-react-components/react-app/src/assets/saw-wallpaper.jpg -------------------------------------------------------------------------------- /examples/microfrontend-react-app-react-components/react-app/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | 5 | ReactDOM.createRoot(document.getElementById('root')).render( 6 | 7 | 8 | , 9 | ) 10 | 11 | -------------------------------------------------------------------------------- /examples/microfrontend-react-app-react-components/react-app/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import federation from '@originjs/vite-plugin-federation'; 3 | import react from '@vitejs/plugin-react-swc'; 4 | import path from 'path'; 5 | 6 | export default defineConfig({ 7 | resolve: { 8 | alias: { 9 | '@': path.resolve(__dirname, './src'), 10 | }, 11 | }, 12 | plugins: [ 13 | react(), 14 | federation({ 15 | name: 'reactApp', 16 | filename: 'remoteEntry.js', 17 | remotes: { 18 | reactComponents: 'http://localhost:3001/assets/remoteEntry.js', 19 | }, 20 | shared: ['react', 'react-dom'], 21 | }), 22 | ], 23 | build: { 24 | target: 'esnext', 25 | }, 26 | }); 27 | -------------------------------------------------------------------------------- /examples/microfrontend-react-app-react-components/react-components/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | /* eslint-env node */ 2 | 3 | module.exports = { 4 | env: { 5 | browser: true, 6 | es2020: true 7 | }, 8 | extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:react/jsx-runtime', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended'], 9 | parserOptions: { 10 | ecmaVersion: 'latest', 11 | sourceType: 'module' 12 | }, 13 | settings: { 14 | react: { 15 | version: '18.2' 16 | } 17 | }, 18 | plugins: ['react-refresh'], 19 | rules: { 20 | 'react-refresh/only-export-components': ['warn', { 21 | allowConstantExport: true 22 | }] 23 | } 24 | }; -------------------------------------------------------------------------------- /examples/microfrontend-react-app-react-components/react-components/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/microfrontend-react-app-react-components/react-components/.storybook/main.js: -------------------------------------------------------------------------------- 1 | import { mergeConfig } from 'vite'; 2 | export default { 3 | stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], 4 | addons: ['@storybook/addon-links', '@storybook/addon-essentials'], 5 | async viteFinal(config) { 6 | return mergeConfig(config, { 7 | optimizeDeps: { 8 | include: ['storybook-dark-mode'] 9 | } 10 | }); 11 | }, 12 | framework: { 13 | name: '@storybook/react-vite', 14 | options: {} 15 | }, 16 | docs: { 17 | autodocs: true 18 | } 19 | }; -------------------------------------------------------------------------------- /examples/microfrontend-react-app-react-components/react-components/.storybook/preview.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const preview = { 4 | decorators: [ 5 | (Story) => ( 6 |
7 | 8 |
9 | ), 10 | ], 11 | actions: { argTypesRegex: '^on[A-Z].*' }, 12 | layout: 'centered', 13 | }; 14 | 15 | export default preview; 16 | -------------------------------------------------------------------------------- /examples/microfrontend-react-app-react-components/react-components/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | React + Storybook 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/microfrontend-react-app-react-components/react-components/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const App = () => { 4 | return ( 5 | <> 6 |

I'm just providing components

7 | 8 | ); 9 | }; 10 | 11 | export default App; 12 | -------------------------------------------------------------------------------- /examples/microfrontend-react-app-react-components/react-components/src/components/CustomButton/CustomButton.stories.js: -------------------------------------------------------------------------------- 1 | import CustomButton from '.'; 2 | 3 | const meta = { 4 | component: CustomButton, 5 | tags: ['autodocs'], 6 | }; 7 | 8 | export default meta; 9 | 10 | export const Primary = { 11 | args: { 12 | onClick: () => console.log('onClick'), 13 | label: 'button', 14 | disabled: false, 15 | loading: false, 16 | variant: 'contained', 17 | }, 18 | }; 19 | 20 | export const Secondary = { 21 | args: { 22 | ...Primary.args, 23 | variant: 'outlined', 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /examples/microfrontend-react-app-react-components/react-components/src/components/CustomButton/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button, CircularProgress } from '@mui/material'; 3 | 4 | const CustomButton = ({ onClick, label, disabled, loading, variant }) => { 5 | return ( 6 | 9 | ); 10 | }; 11 | 12 | export default CustomButton; 13 | -------------------------------------------------------------------------------- /examples/microfrontend-react-app-react-components/react-components/src/components/Item/Item.stories.js: -------------------------------------------------------------------------------- 1 | import Item from './'; 2 | 3 | const meta = { 4 | component: Item, 5 | tags: ['autodocs'], 6 | }; 7 | 8 | export default meta; 9 | 10 | export const ItemDemo = { 11 | args: { 12 | label: 'Item', 13 | index: 0, 14 | disabled: false, 15 | selected: false, 16 | correctAnswer: 'The Legend of Zelda: Ocarina of Time', 17 | setAnswer: () => {}, 18 | }, 19 | }; 20 | -------------------------------------------------------------------------------- /examples/microfrontend-react-app-react-components/react-components/src/components/Select/Select.stories.js: -------------------------------------------------------------------------------- 1 | import Select from '.'; 2 | 3 | const meta = { 4 | component: Select, 5 | tags: ['autodocs'], 6 | }; 7 | 8 | export default meta; 9 | 10 | export const SelectDemo = { 11 | args: { 12 | onChange: () => console.log('onChange'), 13 | items: [ 14 | { label: 'The Legend of Zelda: Ocarina of Time', value: 'The Legend of Zelda: Ocarina of Time' }, 15 | { label: 'Minecraft', value: 'Minecraft' }, 16 | { label: 'Grand Theft Auto V', value: 'Grand Theft Auto V' }, 17 | ], 18 | id: '1', 19 | title: 'What is the best selling video game of all time?', 20 | }, 21 | }; 22 | -------------------------------------------------------------------------------- /examples/microfrontend-react-app-react-components/react-components/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | 5 | ReactDOM.createRoot(document.getElementById('root')).render( 6 | 7 | 8 | , 9 | ) 10 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-app-shared-routing/container/.env.example: -------------------------------------------------------------------------------- 1 | VITE_MFE_REACT_APP_DOMAIN= -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-app-shared-routing/container/config/webpack.common.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | resolve: { 3 | extensions: ['.jsx', '.js', '.json', '.mjs'], 4 | }, 5 | module: { 6 | rules: [ 7 | { 8 | test: /\.m?js$/, 9 | type: 'javascript/auto', 10 | resolve: { 11 | fullySpecified: false, 12 | }, 13 | }, 14 | { 15 | test: /\.jsx?$/, 16 | loader: require.resolve('babel-loader'), 17 | exclude: /node_modules/, 18 | options: { 19 | presets: [require.resolve('@babel/preset-react')], 20 | }, 21 | }, 22 | ], 23 | }, 24 | }; 25 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-app-shared-routing/container/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | React + Shared Routing 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-app-shared-routing/container/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; 3 | import ReactApp from './pages/ReactApp'; 4 | import FaqPage from './pages/FaqPage'; 5 | 6 | const App = () => { 7 | return ( 8 | 9 | 10 | {/* the order of the routes matters */} 11 | 12 | {/* ReactApp has its own routing */} 13 | 14 | 15 | 16 | ); 17 | }; 18 | 19 | export default App; 20 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-app-shared-routing/container/src/bootstrap.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App.jsx'; 4 | 5 | ReactDOM.createRoot(document.getElementById('root')).render(); 6 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-app-shared-routing/container/src/main.js: -------------------------------------------------------------------------------- 1 | import('./bootstrap'); -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-app-shared-routing/container/src/pages/FaqPage.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const FaqPage = () => { 4 | return ( 5 | <> 6 |

FAQ

7 |

FAQ page content

8 | 9 | ); 10 | }; 11 | 12 | export default FaqPage; 13 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-app-shared-routing/container/src/pages/ReactApp.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import useMountApp from '../hooks/useMountApp'; 3 | 4 | const ReactApp = () => { 5 | const { ref } = useMountApp(); 6 | const reactComponent = React.createElement('div', { ref }, 'React App'); 7 | return reactComponent; 8 | }; 9 | 10 | export default ReactApp; 11 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-app-shared-routing/history-diagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nanlabs/frontend-reference/107c237e77d1e039c54d84b6b4e55ea0cc67863e/examples/microfrontend-react-shell-react-app-shared-routing/history-diagram.png -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-app-shared-routing/react-app/.env.example: -------------------------------------------------------------------------------- 1 | VITE_API_TRIVIA_URL=https://the-trivia-api.com/v2 -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-app-shared-routing/react-app/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { browser: true, es2020: true }, 3 | extends: [ 4 | 'eslint:recommended', 5 | 'plugin:react/recommended', 6 | 'plugin:react/jsx-runtime', 7 | 'plugin:react-hooks/recommended', 8 | ], 9 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 10 | settings: { react: { version: '18.2' } }, 11 | plugins: ['react-refresh'], 12 | rules: { 13 | 'react-refresh/only-export-components': 'warn', 14 | }, 15 | } 16 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-app-shared-routing/react-app/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-app-shared-routing/react-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | ReactApp 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-app-shared-routing/react-app/src/assets/saw-wallpaper.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nanlabs/frontend-reference/107c237e77d1e039c54d84b6b4e55ea0cc67863e/examples/microfrontend-react-shell-react-app-shared-routing/react-app/src/assets/saw-wallpaper.jpg -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-app-shared-routing/react-app/src/components/Button.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button, CircularProgress } from '@mui/material'; 3 | 4 | const CustomButton = ({ onClick, label, disabled, loading, variant }) => { 5 | return ( 6 | 9 | ); 10 | }; 11 | 12 | export default CustomButton; 13 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-app-shared-routing/react-app/src/main.jsx: -------------------------------------------------------------------------------- 1 | import('./bootstrap'); 2 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-app-shared-routing/react-app/src/pages/About.jsx: -------------------------------------------------------------------------------- 1 | /* create About component */ 2 | import React from 'react'; 3 | 4 | const About = () => { 5 | return ( 6 |
7 |

About

8 |

Welcome to the About page!

9 |
10 | ); 11 | }; 12 | 13 | export default About; 14 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-vue-app/container/config/webpack.common.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | resolve: { 3 | extensions: ['.jsx', '.js', '.json', '.mjs'], 4 | }, 5 | module: { 6 | rules: [ 7 | { 8 | test: /\.m?js$/, 9 | type: 'javascript/auto', 10 | resolve: { 11 | fullySpecified: false, 12 | }, 13 | }, 14 | { 15 | test: /\.jsx?$/, 16 | loader: require.resolve('babel-loader'), 17 | exclude: /node_modules/, 18 | options: { 19 | presets: [require.resolve('@babel/preset-react')], 20 | }, 21 | }, 22 | ], 23 | }, 24 | }; 25 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-vue-app/container/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | React + Vue 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-vue-app/container/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; 3 | import ReactApp from './pages/ReactApp'; 4 | import VueApp from './pages/VueApp'; 5 | import Home from './pages/Home'; 6 | 7 | const App = () => { 8 | return ( 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | }; 18 | 19 | export default App; 20 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-vue-app/container/src/bootstrap.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App.jsx'; 4 | 5 | ReactDOM.createRoot(document.getElementById('root')).render(); 6 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-vue-app/container/src/hooks/useReactApp.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useRef } from 'react'; 2 | 3 | const useMountedApps = ({ mount, store = null }) => { 4 | // this hook recieves the mount function and the store as props 5 | // then it creates a ref that will be used to mount the app 6 | // as a react component 7 | const ref = useRef(null); 8 | useEffect(() => { 9 | mount(ref.current, { store }); 10 | }, []); 11 | return { ref }; 12 | }; 13 | 14 | export default useMountedApps; 15 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-vue-app/container/src/hooks/useStore.jsx: -------------------------------------------------------------------------------- 1 | import { useTriviaGlobalStore } from '../store'; 2 | 3 | export const useStore = () => { 4 | const setResults = useTriviaGlobalStore((state) => state.setResults); 5 | const getResults = useTriviaGlobalStore((state) => () => state.getResults()); 6 | 7 | return { 8 | setResults, 9 | getResults, 10 | }; 11 | }; 12 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-vue-app/container/src/main.js: -------------------------------------------------------------------------------- 1 | import('./bootstrap'); -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-vue-app/container/src/pages/Home.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { useHistory } from 'react-router-dom'; 3 | import CustomButton from '../../../react-app/src/components/Button'; 4 | 5 | const Home = () => { 6 | const history = useHistory(); 7 | 8 | const handleStart = () => { 9 | history.push('/react'); 10 | }; 11 | 12 | return ( 13 |
14 |

HOME

15 |

this page is rendered by the container

16 | 17 |
18 | ); 19 | }; 20 | 21 | export default Home; 22 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-vue-app/container/src/pages/ReactApp.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { mount } from 'reactApp/ReactApp'; 3 | import useMountedApps from '../hooks/useReactApp'; 4 | import { useStore } from '../hooks/useStore'; 5 | 6 | const ReactApp = () => { 7 | const { setResults } = useStore(); 8 | // we are passing the store to the react app as a prop 9 | const { ref } = useMountedApps({ mount, store: { setResults } }); 10 | // we are creating a react component that will be rendered in the container 11 | const reactComponent = React.createElement('div', { ref }, 'ReactApp'); 12 | return reactComponent; 13 | }; 14 | 15 | export default ReactApp; 16 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-vue-app/container/src/pages/VueApp.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { mount } from 'vueApp/bootstrap'; 3 | import useMountedApps from '../hooks/useReactApp'; 4 | import { useStore } from '../hooks/useStore'; 5 | 6 | const VueApp = () => { 7 | const { getResults } = useStore(); 8 | const { results } = getResults(); 9 | // we are passing the store to the vue app as a prop 10 | const { ref } = useMountedApps({ mount, store: { results } }); 11 | // we are creating a react component that will be rendered in the container 12 | const reactComponent = React.createElement('div', { ref }, 'VueApp'); 13 | return reactComponent; 14 | }; 15 | 16 | export default VueApp; 17 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-vue-app/container/src/store/index.js: -------------------------------------------------------------------------------- 1 | import { create } from 'zustand'; 2 | import { devtools, persist, createJSONStorage } from 'zustand/middleware'; 3 | 4 | const DEFAULT_TRIVIA_STATE = { 5 | results: {}, 6 | }; 7 | 8 | export const useTriviaGlobalStore = create( 9 | devtools( 10 | persist( 11 | (set, get) => ({ 12 | ...DEFAULT_TRIVIA_STATE, 13 | setResults: (results) => set({ results }, true, 'SET_RESULTS'), 14 | getResults: () => get().results, 15 | }), 16 | { 17 | name: 'store', 18 | storage: createJSONStorage(() => sessionStorage), 19 | } 20 | ), 21 | { name: 'trivia-global-store' } 22 | ) 23 | ); 24 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-vue-app/mfe-diagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nanlabs/frontend-reference/107c237e77d1e039c54d84b6b4e55ea0cc67863e/examples/microfrontend-react-shell-react-vue-app/mfe-diagram.png -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-vue-app/react-app/.env.example: -------------------------------------------------------------------------------- 1 | VITE_API_TRIVIA_URL=https://the-trivia-api.com/v2 -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-vue-app/react-app/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { browser: true, es2020: true }, 3 | extends: [ 4 | 'eslint:recommended', 5 | 'plugin:react/recommended', 6 | 'plugin:react/jsx-runtime', 7 | 'plugin:react-hooks/recommended', 8 | ], 9 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 10 | settings: { react: { version: '18.2' } }, 11 | plugins: ['react-refresh'], 12 | rules: { 13 | 'react-refresh/only-export-components': 'warn', 14 | }, 15 | } 16 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-vue-app/react-app/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-vue-app/react-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | ReactApp 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-vue-app/react-app/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { createTheme, ThemeProvider } from '@mui/material/styles'; 3 | import './App.css'; 4 | 5 | import Home from './pages/Home'; 6 | 7 | const theme = createTheme({ 8 | palette: { 9 | primary: { 10 | main: '#fff', 11 | }, 12 | secondary: { 13 | main: '#000', 14 | }, 15 | }, 16 | }); 17 | 18 | const App = ({ store }) => { 19 | // "setResults" comes from container & updates the parent store 20 | const { setResults } = store; 21 | return ( 22 | 23 | 24 | 25 | ); 26 | }; 27 | 28 | export default App; 29 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-vue-app/react-app/src/assets/saw-wallpaper.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nanlabs/frontend-reference/107c237e77d1e039c54d84b6b4e55ea0cc67863e/examples/microfrontend-react-shell-react-vue-app/react-app/src/assets/saw-wallpaper.jpg -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-vue-app/react-app/src/bootstrap.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App.jsx'; 4 | 5 | const mount = (rootElement, { store }) => { 6 | const root = ReactDOM.createRoot(rootElement); 7 | // recieve store from container 8 | root.render(); 9 | }; 10 | 11 | if (import.meta.env.MODE === 'development') { 12 | // STANDALONE MODE 13 | const devRoot = document.querySelector('#react_app_root'); 14 | if (devRoot) { 15 | mount(devRoot, { store: null }); 16 | } 17 | } 18 | 19 | export { mount }; 20 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-vue-app/react-app/src/components/Button.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button, CircularProgress } from '@mui/material'; 3 | 4 | const CustomButton = ({ onClick, label, disabled, loading, variant }) => { 5 | return ( 6 | 9 | ); 10 | }; 11 | 12 | export default CustomButton; 13 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-vue-app/react-app/src/components/Header.jsx: -------------------------------------------------------------------------------- 1 | import { Typography, Box } from '@mui/material'; 2 | import React from 'react'; 3 | 4 | const Header = () => { 5 | return ( 6 | 7 | 8 | Welcome to the Trivia Challenge! 9 | 10 | 11 | The Game of Life and Death 12 | 13 | 14 | Do you wanna try? 15 | 16 | 17 | ); 18 | }; 19 | 20 | export default Header; 21 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-vue-app/react-app/src/main.jsx: -------------------------------------------------------------------------------- 1 | import('./bootstrap'); 2 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-vue-app/vue-app/.env.example: -------------------------------------------------------------------------------- 1 | VITE_API_PHRASE_URL=https://api.api-ninjas.com/v1/quotes?category=happiness 2 | VITE_API_PHRASE_KEY=3v7JQtaGVvCbkwzLjapzLg==RQdXqKufKNf34YkC -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-vue-app/vue-app/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-vue-app/vue-app/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-vue-app/vue-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | VueApp 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-vue-app/vue-app/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 9 | 25 | 26 | 33 | 34 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-vue-app/vue-app/src/assets/vue.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-vue-app/vue-app/src/bootstrap.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import './style.css'; 3 | import App from './App.vue'; 4 | 5 | const mount = (rootElement, { store }) => { 6 | // recieve store from container 7 | const { results } = store; 8 | const app = createApp(App, { results }); 9 | app.mount(rootElement); 10 | return app; 11 | }; 12 | 13 | if (import.meta.env.MODE === 'development') { 14 | // STANDALONE MODE 15 | const vueApp = document.querySelector('#app'); 16 | mount(vueApp, { store: null }); 17 | } 18 | 19 | export { mount }; 20 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-vue-app/vue-app/src/main.js: -------------------------------------------------------------------------------- 1 | import('./bootstrap'); 2 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-vue-app/vue-app/src/pages/Results.vue: -------------------------------------------------------------------------------- 1 | 4 | 14 | 15 | -------------------------------------------------------------------------------- /examples/microfrontend-react-shell-react-vue-app/vue-app/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import federation from '@originjs/vite-plugin-federation'; 3 | import vue from '@vitejs/plugin-vue'; 4 | 5 | export default defineConfig({ 6 | plugins: [ 7 | vue(), 8 | federation({ 9 | name: 'vueApp', 10 | filename: 'remoteEntry.js', 11 | // expose entire app 12 | exposes: { 13 | './bootstrap': './src/bootstrap.js', 14 | }, 15 | }), 16 | ], 17 | build: { 18 | modulePreload: false, 19 | target: 'esnext', 20 | minify: true, 21 | cssCodeSplit: false, 22 | }, 23 | }); 24 | -------------------------------------------------------------------------------- /examples/million-poc-performance/.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | indent_style = space 8 | indent_size = 2 9 | end_of_line = lf 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | insert_final_newline = false 15 | trim_trailing_whitespace = false 16 | -------------------------------------------------------------------------------- /examples/million-poc-performance/.env.example: -------------------------------------------------------------------------------- 1 | VITE_APP_BASE_URL= 2 | -------------------------------------------------------------------------------- /examples/million-poc-performance/.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | 3 | # Ignore artifacts: 4 | coverage/ 5 | dist/ 6 | dev-dist/ 7 | public/ 8 | __mocks__/ 9 | 10 | jest.config.js 11 | postcss.config.js 12 | *.d.ts 13 | 14 | src/theme/ 15 | tools/ 16 | -------------------------------------------------------------------------------- /examples/million-poc-performance/.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | npm run lint-staged 5 | -------------------------------------------------------------------------------- /examples/million-poc-performance/.husky/pre-push: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | npm run typecheck 5 | -------------------------------------------------------------------------------- /examples/million-poc-performance/.markdownlint.json: -------------------------------------------------------------------------------- 1 | { 2 | "MD041": false, 3 | "MD042": false, 4 | "MD004": false, 5 | "MD013": false, 6 | "MD033": false 7 | } 8 | -------------------------------------------------------------------------------- /examples/million-poc-performance/.node-version: -------------------------------------------------------------------------------- 1 | v18.15.0 2 | -------------------------------------------------------------------------------- /examples/million-poc-performance/.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | 3 | # Ignore artifacts: 4 | coverage/ 5 | dist/ 6 | dev-dist/ 7 | public/ 8 | __mocks__/ 9 | 10 | jest.config.js 11 | postcss.config.js 12 | *.d.ts 13 | 14 | src/theme/ 15 | -------------------------------------------------------------------------------- /examples/million-poc-performance/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | semi: true, 3 | trailingComma: 'all', 4 | singleQuote: true, 5 | printWidth: 120, 6 | tabWidth: 2, 7 | }; 8 | -------------------------------------------------------------------------------- /examples/million-poc-performance/docs/README.md: -------------------------------------------------------------------------------- 1 | # Extra Documentation 2 | 3 | This folder contains extra documentation for the project such us project structure, configuration, etc. 4 | 5 | ## Resources 6 | 7 | - [Project Structure](./PROJECT_STRUCTURE.md) 8 | - [Project Configuration](./PROJECT_CONFIGURATION.md) 9 | - [Components and Styling](./COMPONENTS_AND_STYLING.md) 10 | - [Performance recommendations](./PERFORMANCE.md) 11 | - [State Management recommendations](./STATE_MANAGEMENT.md) 12 | -------------------------------------------------------------------------------- /examples/million-poc-performance/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | millionjs-example 12 | 13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /examples/million-poc-performance/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nanlabs/frontend-reference/107c237e77d1e039c54d84b6b4e55ea0cc67863e/examples/million-poc-performance/public/favicon.ico -------------------------------------------------------------------------------- /examples/million-poc-performance/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { Suspense } from 'react'; 2 | import { BrowserRouter } from 'react-router-dom'; 3 | 4 | import '@/theme'; 5 | 6 | import Loading from '@/components/Loading'; 7 | import AppRoutes from '@/routes/AppRoutes'; 8 | 9 | const App = () => ( 10 | }> 11 | 12 | 13 | 14 | 15 | ); 16 | 17 | export default App; 18 | -------------------------------------------------------------------------------- /examples/million-poc-performance/src/components/Item/ItemBlock.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './styles.scss'; 3 | import { changeColorTone } from '@/utils'; 4 | import { block } from 'million/react'; 5 | 6 | const Item = block(({ value }: { value: number }) => { 7 | const toneColor = changeColorTone('#052127', value); 8 | 9 | const style = { 10 | background: toneColor, 11 | border: `1px solid ${toneColor}`, 12 | }; 13 | 14 | return ( 15 |
16 | {value} 17 |
18 | ); 19 | }); 20 | 21 | export default Item; 22 | -------------------------------------------------------------------------------- /examples/million-poc-performance/src/components/Item/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './styles.scss'; 3 | import { changeColorTone } from '@/utils'; 4 | 5 | const Item = ({ value }: { value: number }) => { 6 | const toneColor = changeColorTone('#052127', value); 7 | 8 | const style = { 9 | background: toneColor, 10 | border: `1px solid ${toneColor}`, 11 | }; 12 | 13 | return ( 14 |
15 | {value} 16 |
17 | ); 18 | }; 19 | 20 | export default Item; 21 | -------------------------------------------------------------------------------- /examples/million-poc-performance/src/components/Item/styles.scss: -------------------------------------------------------------------------------- 1 | .item { 2 | width: 40px; 3 | height: 40px; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | border: 1px solid gray; 8 | } 9 | -------------------------------------------------------------------------------- /examples/million-poc-performance/src/components/Loading/Loading.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './loader.scss'; 4 | 5 | const Loading = () =>
; 6 | 7 | export default Loading; 8 | -------------------------------------------------------------------------------- /examples/million-poc-performance/src/components/Loading/index.ts: -------------------------------------------------------------------------------- 1 | import Loading from './Loading'; 2 | 3 | export default Loading; 4 | -------------------------------------------------------------------------------- /examples/million-poc-performance/src/components/Loading/loader.scss: -------------------------------------------------------------------------------- 1 | .loader { 2 | animation: loaderSpin 1s linear infinite; 3 | border: 4px solid rgba(0, 0, 0, 0.1); 4 | width: 36px; 5 | height: 36px; 6 | border-radius: 50%; 7 | border-left-color: #09f; 8 | } 9 | 10 | @keyframes loaderSpin { 11 | 0% { 12 | transform: rotate(0deg); 13 | } 14 | 15 | 100% { 16 | transform: rotate(360deg); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/million-poc-performance/src/components/TreeNode/TreeNode.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './styles.css'; 3 | import { TreeNodeProps } from '@/utils'; 4 | 5 | const TreeNode = ({ node }: { node: TreeNodeProps }) => { 6 | return ( 7 |
8 |
{node.name}
9 |
10 | {node.children.map((childNode) => ( 11 | 12 | ))} 13 |
14 |
15 | ); 16 | }; 17 | export default TreeNode; 18 | -------------------------------------------------------------------------------- /examples/million-poc-performance/src/components/TreeNode/styles.css: -------------------------------------------------------------------------------- 1 | .tree-node { 2 | display: flex; 3 | flex-direction: column; 4 | flex-wrap: wrap; 5 | overflow: hidden; 6 | justify-content: flex-start; 7 | align-items: flex-start; 8 | } 9 | 10 | .tree-name { 11 | color: lightblue; 12 | flex-grow: 1; 13 | flex-shrink: 0; 14 | overflow: hidden; 15 | } 16 | 17 | .tree-children { 18 | display: flex; 19 | flex-direction: row; 20 | justify-content: flex-start; 21 | flex-wrap: nowrap; 22 | align-items: flex-start; 23 | overflow: hidden; 24 | width: 100%; 25 | border: 1px solid teal; 26 | padding: 2px; 27 | } 28 | -------------------------------------------------------------------------------- /examples/million-poc-performance/src/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.svg" { 2 | import React = require("react"); 3 | export const ReactComponent: React.FC>; 4 | const src: string; 5 | export default src; 6 | } 7 | 8 | declare module "*.jpg" { 9 | const content: string; 10 | export default content; 11 | } 12 | 13 | declare module "*.png" { 14 | const content: string; 15 | export default content; 16 | } 17 | 18 | declare module "*.json" { 19 | const content: string; 20 | export default content; 21 | } 22 | -------------------------------------------------------------------------------- /examples/million-poc-performance/src/hooks/useRequestAnimationFrame.ts: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react'; 2 | 3 | const useRequestAnimationFrame = (fn: () => void) => { 4 | useEffect(() => { 5 | let mounted = true; 6 | 7 | const update = () => { 8 | if (mounted) { 9 | fn(); 10 | requestAnimationFrame(update); 11 | } 12 | }; 13 | requestAnimationFrame(update); 14 | return () => { 15 | mounted = false; 16 | }; 17 | }, []); 18 | }; 19 | 20 | export default useRequestAnimationFrame; 21 | -------------------------------------------------------------------------------- /examples/million-poc-performance/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { createRoot } from 'react-dom/client'; 3 | 4 | import reportWebVitals from '@/report-web-vitals'; 5 | import App from '@/App'; 6 | 7 | const root = createRoot(document.getElementById('root') as HTMLElement); 8 | root.render( 9 | 10 | 11 | , 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(console.log); 18 | -------------------------------------------------------------------------------- /examples/million-poc-performance/src/pages/MillionPage/styles.css: -------------------------------------------------------------------------------- 1 | .root-million-page { 2 | padding: 20px; 3 | width: 100%; 4 | height: 100%; 5 | position: relative; 6 | display: flex; 7 | flex-direction: column; 8 | } 9 | -------------------------------------------------------------------------------- /examples/million-poc-performance/src/pages/ReactPage/styles.css: -------------------------------------------------------------------------------- 1 | .root-react-page { 2 | padding: 20px; 3 | width: 100%; 4 | height: 100%; 5 | position: relative; 6 | display: flex; 7 | flex-direction: column; 8 | } 9 | -------------------------------------------------------------------------------- /examples/million-poc-performance/src/pages/experiment001/Base001.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import Item from '@/components/Item'; 3 | import { generateRandomArray } from '@/utils'; 4 | 5 | import './styles.css'; 6 | import useRequestAnimationFrame from '@/hooks/useRequestAnimationFrame'; 7 | 8 | const ARRAY_LENGTH = 1000; 9 | 10 | const Base001 = () => { 11 | const [array, setArray] = useState(generateRandomArray(ARRAY_LENGTH)); 12 | useRequestAnimationFrame(() => setArray(generateRandomArray(ARRAY_LENGTH))); 13 | 14 | return ( 15 |
16 | {array.map((value) => ( 17 | 18 | ))} 19 |
20 | ); 21 | }; 22 | 23 | export default Base001; 24 | -------------------------------------------------------------------------------- /examples/million-poc-performance/src/pages/experiment001/styles.css: -------------------------------------------------------------------------------- 1 | .playground { 2 | width: 100%; 3 | height: 100%; 4 | position: relative; 5 | display: flex; 6 | flex-direction: row; 7 | flex-wrap: wrap; 8 | } 9 | -------------------------------------------------------------------------------- /examples/million-poc-performance/src/pages/experiment002/styles.css: -------------------------------------------------------------------------------- 1 | .playground-002 { 2 | padding: 20px; 3 | width: 100%; 4 | height: 100%; 5 | position: relative; 6 | display: flex; 7 | flex-direction: row; 8 | flex-wrap: nowrap; 9 | } 10 | -------------------------------------------------------------------------------- /examples/million-poc-performance/src/pages/experiment003/styles.css: -------------------------------------------------------------------------------- 1 | .playground-003 { 2 | padding: 20px; 3 | width: 100%; 4 | height: 100%; 5 | position: relative; 6 | display: flex; 7 | flex-direction: row; 8 | flex-wrap: wrap; 9 | } 10 | 11 | .playground-003 div { 12 | border: 1px solid gray; 13 | width: 40px; 14 | height: 40px; 15 | display: flex; 16 | align-items: center; 17 | justify-content: center; 18 | } 19 | -------------------------------------------------------------------------------- /examples/million-poc-performance/src/pages/experiment004/Base.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import './styles.css'; 3 | import useRequestAnimationFrame from '@/hooks/useRequestAnimationFrame'; 4 | import { TreeNodeProps, generateTree, shuffle } from '@/utils'; 5 | import TreeNode from '@/components/TreeNode/TreeNode'; 6 | 7 | const Tree = () => { 8 | const [tree, setTree] = useState(generateTree(10)); 9 | 10 | useRequestAnimationFrame(() => setTree(shuffle(tree))); 11 | 12 | return ( 13 |
14 | {[tree].map((rootNode) => ( 15 | 16 | ))} 17 |
18 | ); 19 | }; 20 | 21 | export default Tree; 22 | -------------------------------------------------------------------------------- /examples/million-poc-performance/src/pages/experiment004/Million.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import './styles.css'; 3 | import { For, block } from 'million/react'; 4 | import useRequestAnimationFrame from '@/hooks/useRequestAnimationFrame'; 5 | import { TreeNodeProps, generateTree, shuffle } from '@/utils'; 6 | import TreeNodeBlock from '@/components/TreeNode/TreeNodeBlock'; 7 | 8 | const Tree = block(() => { 9 | const [tree, setTree] = useState(generateTree(10)); 10 | useRequestAnimationFrame(() => setTree(shuffle(tree))); 11 | 12 | return ( 13 |
14 | {(value, i) => } 15 |
16 | ); 17 | }); 18 | 19 | export default Tree; 20 | -------------------------------------------------------------------------------- /examples/million-poc-performance/src/report-web-vitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler): void => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /examples/million-poc-performance/src/theme/global.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | #root { 6 | width: 100vw; 7 | height: 100vh; 8 | } 9 | 10 | body { 11 | background: #052127; 12 | height: 100vh; 13 | width: 100vw; 14 | padding: 0; 15 | margin: 0; 16 | overflow: hidden; 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | color: #fff; 21 | font-family: sans-serif; 22 | } 23 | 24 | h1 { 25 | margin: 0 0 12px 0; 26 | } 27 | 28 | p { 29 | margin: 12px 0; 30 | } 31 | 32 | a { 33 | color: aquamarine; 34 | padding: 0 4px; 35 | } -------------------------------------------------------------------------------- /examples/million-poc-performance/src/theme/index.ts: -------------------------------------------------------------------------------- 1 | // Import theme setup and global styles here 2 | import "./global.css" -------------------------------------------------------------------------------- /examples/million-poc-performance/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/million-poc-performance/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /examples/navigator-clipboard-api-integration/styles.css: -------------------------------------------------------------------------------- 1 | .main-container { 2 | display: flex; 3 | flex-direction: row; 4 | gap: 20px; 5 | } 6 | 7 | .container { 8 | display: flex; 9 | flex-direction: column; 10 | width: fit-content; 11 | padding: 10px 20px; 12 | margin-bottom: 20px; 13 | border: 1px solid #ccc; 14 | border-radius: 10px; 15 | background-color: #eaeaea; 16 | } 17 | 18 | .button-copy { 19 | padding: 10px 20px; 20 | background-color: #007bff; 21 | color: #fff; 22 | border: none; 23 | cursor: pointer; 24 | border-radius: 10px; 25 | } 26 | 27 | .buttons-container { 28 | display: flex; 29 | flex-direction: column; 30 | gap: 10px; 31 | } 32 | 33 | .image { 34 | width: 200px; 35 | height: 200px; 36 | } 37 | -------------------------------------------------------------------------------- /examples/nextjs-with-swr-example/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /examples/nextjs-with-swr-example/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env*.local 29 | 30 | # vercel 31 | .vercel 32 | 33 | # typescript 34 | *.tsbuildinfo 35 | next-env.d.ts 36 | -------------------------------------------------------------------------------- /examples/nextjs-with-swr-example/.node-version: -------------------------------------------------------------------------------- 1 | v16.16.0 -------------------------------------------------------------------------------- /examples/nextjs-with-swr-example/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {} 3 | 4 | module.exports = nextConfig 5 | -------------------------------------------------------------------------------- /examples/nextjs-with-swr-example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "swr", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "next": "13.5.6", 13 | "react": "^18", 14 | "react-dom": "^18", 15 | "swr": "^2.2.4" 16 | }, 17 | "devDependencies": { 18 | "@types/node": "^20", 19 | "@types/react": "^18", 20 | "@types/react-dom": "^18", 21 | "eslint": "^8", 22 | "eslint-config-next": "13.5.6", 23 | "typescript": "^5" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /examples/nextjs-with-swr-example/pages/api/todos.ts: -------------------------------------------------------------------------------- 1 | import { db } from "@/lib/db"; 2 | import { NextApiHandler } from "next"; 3 | 4 | const handler: NextApiHandler = async (req, res) => { 5 | switch (req.method) { 6 | case "GET": 7 | const todos = await db.todo.findMany(); 8 | return res.status(200).json(todos); 9 | case "POST": 10 | const todo = await db.todo.create({ data: req.body }); 11 | return res.status(200).json(todo); 12 | case "PUT": 13 | const updatedTodo = await db.todo.update(req.body.id, req.body); 14 | return res.status(200).json(updatedTodo); 15 | default: 16 | return res.status(405).end(`Method ${req.method} Not Allowed`); 17 | } 18 | }; 19 | 20 | export default handler; 21 | -------------------------------------------------------------------------------- /examples/nextjs-with-swr-example/public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/nextjs-with-swr-example/src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nanlabs/frontend-reference/107c237e77d1e039c54d84b6b4e55ea0cc67863e/examples/nextjs-with-swr-example/src/app/favicon.ico -------------------------------------------------------------------------------- /examples/nextjs-with-swr-example/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from 'next' 2 | import { Inter } from 'next/font/google' 3 | import './globals.css' 4 | 5 | const inter = Inter({ subsets: ['latin'] }) 6 | 7 | export const metadata: Metadata = { 8 | title: 'Create Next App', 9 | description: 'Generated by create next app', 10 | } 11 | 12 | export default function RootLayout({ 13 | children, 14 | }: { 15 | children: React.ReactNode 16 | }) { 17 | return ( 18 | 19 | {children} 20 | 21 | ) 22 | } 23 | -------------------------------------------------------------------------------- /examples/nextjs-with-swr-example/src/app/style.css: -------------------------------------------------------------------------------- 1 | .completed { 2 | text-decoration: line-through; 3 | color: gray; 4 | } 5 | 6 | li { 7 | list-style-type: none; 8 | margin: 1rem; 9 | padding: 0; 10 | padding: 0.5rem; 11 | border-bottom: 1px solid lightgray; 12 | font-size: medium; 13 | } 14 | 15 | li input { 16 | margin-right: 1rem; 17 | } -------------------------------------------------------------------------------- /examples/nextjs-with-swr-example/src/hooks/_fetcher.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Fetch data from the server using the GET method and returns the response as JSON 3 | * @param url string 4 | * @returns (url: string) => Promise 5 | */ 6 | export const fetcher = async (url: string) => { 7 | const res = await fetch(url, { 8 | headers: { 9 | "Common-header": "this is an example" 10 | }, 11 | }); 12 | // If the status code is not in the range 200-299, 13 | // we still try to parse and throw it. 14 | if (!res.ok) { 15 | // Attach extra info to the error object. 16 | throw new Error(res.statusText, { cause: await res.json() }) 17 | } 18 | return res.json(); 19 | }; 20 | -------------------------------------------------------------------------------- /examples/nextjs-with-swr-example/src/hooks/_mutator.ts: -------------------------------------------------------------------------------- 1 | // Fetcher implementation. 2 | // The extra argument will be passed via the `arg` property of the 2nd parameter. 3 | 4 | import { SWRArgOptions } from "@/types"; 5 | 6 | export const mutator = async (url: string, { arg }: SWRArgOptions) => { 7 | try { 8 | const response = await fetch(url, { 9 | method: arg.method, 10 | headers: { 11 | ...arg.headers, 12 | "Common-header": "This is a mutation common header" 13 | }, 14 | body: JSON.stringify(arg.body) 15 | }) 16 | if (!response.ok) throw new Error(response.statusText); 17 | return response.json() as Promise; 18 | } catch (error) { 19 | console.error(error); 20 | throw error; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/nextjs-with-swr-example/src/hooks/useGetTodos.ts: -------------------------------------------------------------------------------- 1 | import useSWR from "swr"; 2 | import { fetcher } from "./_fetcher"; 3 | import { Todo } from "@/types"; 4 | 5 | const useGetTodos = () => { 6 | const url = "/api/todos"; 7 | 8 | const { data, error, isLoading, isValidating, mutate } = useSWR>(url, fetcher, /* config */); 9 | 10 | const refetch = () => mutate(); 11 | 12 | return { todos: data, error, isLoading, isValidating, refetch }; 13 | }; 14 | 15 | export default useGetTodos; 16 | -------------------------------------------------------------------------------- /examples/nextjs-with-swr-example/src/types/index.ts: -------------------------------------------------------------------------------- 1 | export type Todo = { 2 | id: string; 3 | title: string; 4 | description: string; 5 | completed: boolean; 6 | } 7 | 8 | export type ExtraSWROptions = { 9 | method: "POST" | "PUT"; 10 | headers?: Record; 11 | body?: TData; 12 | } 13 | 14 | export type SWRArgOptions = { 15 | arg: ExtraSWROptions; 16 | } 17 | -------------------------------------------------------------------------------- /examples/nextjs-with-swr-example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./src/*"] 23 | } 24 | }, 25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 26 | "exclude": ["node_modules"] 27 | } 28 | -------------------------------------------------------------------------------- /examples/react-native-expo-router-with-shared-routes/.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | indent_style = space 8 | indent_size = 2 9 | end_of_line = lf 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | insert_final_newline = true 15 | trim_trailing_whitespace = true 16 | -------------------------------------------------------------------------------- /examples/react-native-expo-router-with-shared-routes/.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | 3 | # Ignore artifacts: 4 | 5 | coverage/ 6 | dist/ 7 | dev-dist/ 8 | public/ 9 | **mocks**/ 10 | 11 | jest.config.js 12 | postcss.config.js 13 | babel.config.js 14 | \*.d.ts 15 | 16 | src/theme/ 17 | tools/ 18 | docs/ 19 | -------------------------------------------------------------------------------- /examples/react-native-expo-router-with-shared-routes/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['universe/native', 'universe/shared/typescript-analysis', 'plugin:prettier/recommended'], 4 | ignorePatterns: ['.eslintrc.js'], 5 | overrides: [ 6 | { 7 | files: ['**/*.ts', '**/*.tsx', '*.d.ts'], 8 | parserOptions: { 9 | project: './tsconfig.json', 10 | }, 11 | }, 12 | ], 13 | }; 14 | -------------------------------------------------------------------------------- /examples/react-native-expo-router-with-shared-routes/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .expo/ 3 | dist/ 4 | npm-debug.* 5 | *.jks 6 | *.p8 7 | *.p12 8 | *.key 9 | *.mobileprovision 10 | *.orig.* 11 | web-build/ 12 | 13 | # macOS 14 | .DS_Store 15 | -------------------------------------------------------------------------------- /examples/react-native-expo-router-with-shared-routes/.markdownlint.json: -------------------------------------------------------------------------------- 1 | { 2 | "MD041": false, 3 | "MD042": false, 4 | "MD004": false, 5 | "MD013": false, 6 | "MD033": false 7 | } 8 | -------------------------------------------------------------------------------- /examples/react-native-expo-router-with-shared-routes/.node-version: -------------------------------------------------------------------------------- 1 | v18.15.0 2 | -------------------------------------------------------------------------------- /examples/react-native-expo-router-with-shared-routes/.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | 3 | # Ignore artifacts: 4 | coverage/ 5 | dist/ 6 | dev-dist/ 7 | public/ 8 | __mocks__/ 9 | 10 | jest.config.js 11 | postcss.config.js 12 | *.d.ts 13 | 14 | src/theme/ 15 | -------------------------------------------------------------------------------- /examples/react-native-expo-router-with-shared-routes/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | semi: true, 3 | trailingComma: 'all', 4 | singleQuote: true, 5 | printWidth: 120, 6 | tabWidth: 2, 7 | }; 8 | -------------------------------------------------------------------------------- /examples/react-native-expo-router-with-shared-routes/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nanlabs/frontend-reference/107c237e77d1e039c54d84b6b4e55ea0cc67863e/examples/react-native-expo-router-with-shared-routes/assets/adaptive-icon.png -------------------------------------------------------------------------------- /examples/react-native-expo-router-with-shared-routes/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nanlabs/frontend-reference/107c237e77d1e039c54d84b6b4e55ea0cc67863e/examples/react-native-expo-router-with-shared-routes/assets/favicon.png -------------------------------------------------------------------------------- /examples/react-native-expo-router-with-shared-routes/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nanlabs/frontend-reference/107c237e77d1e039c54d84b6b4e55ea0cc67863e/examples/react-native-expo-router-with-shared-routes/assets/icon.png -------------------------------------------------------------------------------- /examples/react-native-expo-router-with-shared-routes/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nanlabs/frontend-reference/107c237e77d1e039c54d84b6b4e55ea0cc67863e/examples/react-native-expo-router-with-shared-routes/assets/splash.png -------------------------------------------------------------------------------- /examples/react-native-expo-router-with-shared-routes/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function (api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /examples/react-native-expo-router-with-shared-routes/docs/README.md: -------------------------------------------------------------------------------- 1 | # Extra Documentation 2 | 3 | This folder contains extra documentation for the project such us project structure, configuration, etc. 4 | 5 | ## Resources 6 | 7 | - [Project Configuration](./PROJECT_CONFIGURATION.md) 8 | - [Components and Styling](./COMPONENTS_AND_STYLING.md) 9 | - [Performance recommendations](./PERFORMANCE.md) 10 | - [State Management recommendations](./STATE_MANAGEMENT.md) 11 | - [Shared Routes](./SHARED_ROUTES.md) 12 | -------------------------------------------------------------------------------- /examples/react-native-expo-router-with-shared-routes/src/app/(tabs)/(home, feed, example)/_layout.tsx: -------------------------------------------------------------------------------- 1 | import { Stack } from 'expo-router'; 2 | 3 | export default function DynamicLayout() { 4 | return ( 5 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /examples/react-native-expo-router-with-shared-routes/src/app/_layout.tsx: -------------------------------------------------------------------------------- 1 | import { Stack } from 'expo-router'; 2 | 3 | const StackLayout = () => { 4 | return ( 5 | 6 | 7 | 8 | ); 9 | }; 10 | 11 | export default StackLayout; 12 | -------------------------------------------------------------------------------- /examples/react-native-expo-router-with-shared-routes/src/app/index.tsx: -------------------------------------------------------------------------------- 1 | import { Redirect } from 'expo-router'; 2 | 3 | const IndexPage = () => ; 4 | 5 | export default IndexPage; 6 | -------------------------------------------------------------------------------- /examples/react-native-expo-router-with-shared-routes/src/components/Button.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button as ReactNativeButton } from 'react-native'; 3 | 4 | type ButtonProps = { 5 | onClick: () => void; 6 | title: string; 7 | }; 8 | 9 | const Button = ({ onClick, title }: ButtonProps) => { 10 | return ; 11 | }; 12 | 13 | export default Button; 14 | -------------------------------------------------------------------------------- /examples/react-native-expo-router-with-shared-routes/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true, 5 | "baseUrl": ".", 6 | "paths": { 7 | "@/*": ["src/*"], 8 | }, 9 | }, 10 | } 11 | -------------------------------------------------------------------------------- /examples/react-native-expo-router/.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | indent_style = space 8 | indent_size = 2 9 | end_of_line = lf 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | insert_final_newline = true 15 | trim_trailing_whitespace = true 16 | -------------------------------------------------------------------------------- /examples/react-native-expo-router/.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | 3 | # Ignore artifacts: 4 | 5 | coverage/ 6 | dist/ 7 | dev-dist/ 8 | public/ 9 | **mocks**/ 10 | 11 | jest.config.js 12 | postcss.config.js 13 | babel.config.js 14 | \*.d.ts 15 | 16 | src/theme/ 17 | tools/ 18 | docs/ 19 | -------------------------------------------------------------------------------- /examples/react-native-expo-router/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['universe/native', 'universe/shared/typescript-analysis', 'plugin:prettier/recommended'], 4 | ignorePatterns: ['.eslintrc.js'], 5 | overrides: [ 6 | { 7 | files: ['**/*.ts', '**/*.tsx', '*.d.ts'], 8 | parserOptions: { 9 | project: './tsconfig.json', 10 | }, 11 | }, 12 | ], 13 | }; 14 | -------------------------------------------------------------------------------- /examples/react-native-expo-router/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .expo/ 3 | dist/ 4 | npm-debug.* 5 | *.jks 6 | *.p8 7 | *.p12 8 | *.key 9 | *.mobileprovision 10 | *.orig.* 11 | web-build/ 12 | 13 | # macOS 14 | .DS_Store 15 | -------------------------------------------------------------------------------- /examples/react-native-expo-router/.markdownlint.json: -------------------------------------------------------------------------------- 1 | { 2 | "MD041": false, 3 | "MD042": false, 4 | "MD004": false, 5 | "MD013": false, 6 | "MD033": false 7 | } 8 | -------------------------------------------------------------------------------- /examples/react-native-expo-router/.node-version: -------------------------------------------------------------------------------- 1 | v18.15.0 2 | -------------------------------------------------------------------------------- /examples/react-native-expo-router/.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | 3 | # Ignore artifacts: 4 | coverage/ 5 | dist/ 6 | dev-dist/ 7 | public/ 8 | __mocks__/ 9 | 10 | jest.config.js 11 | postcss.config.js 12 | *.d.ts 13 | 14 | src/theme/ 15 | -------------------------------------------------------------------------------- /examples/react-native-expo-router/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | semi: true, 3 | trailingComma: 'all', 4 | singleQuote: true, 5 | printWidth: 120, 6 | tabWidth: 2, 7 | }; 8 | -------------------------------------------------------------------------------- /examples/react-native-expo-router/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nanlabs/frontend-reference/107c237e77d1e039c54d84b6b4e55ea0cc67863e/examples/react-native-expo-router/assets/adaptive-icon.png -------------------------------------------------------------------------------- /examples/react-native-expo-router/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nanlabs/frontend-reference/107c237e77d1e039c54d84b6b4e55ea0cc67863e/examples/react-native-expo-router/assets/favicon.png -------------------------------------------------------------------------------- /examples/react-native-expo-router/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nanlabs/frontend-reference/107c237e77d1e039c54d84b6b4e55ea0cc67863e/examples/react-native-expo-router/assets/icon.png -------------------------------------------------------------------------------- /examples/react-native-expo-router/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nanlabs/frontend-reference/107c237e77d1e039c54d84b6b4e55ea0cc67863e/examples/react-native-expo-router/assets/splash.png -------------------------------------------------------------------------------- /examples/react-native-expo-router/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function (api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | plugins: ['expo-router/babel'], 6 | }; 7 | }; 8 | -------------------------------------------------------------------------------- /examples/react-native-expo-router/docs/README.md: -------------------------------------------------------------------------------- 1 | # Extra Documentation 2 | 3 | This folder contains extra documentation for the project such us project structure, configuration, etc. 4 | 5 | ## Resources 6 | 7 | - [Project Configuration](./PROJECT_CONFIGURATION.md) 8 | - [Components and Styling](./COMPONENTS_AND_STYLING.md) 9 | - [Performance recommendations](./PERFORMANCE.md) 10 | - [State Management recommendations](./STATE_MANAGEMENT.md) 11 | -------------------------------------------------------------------------------- /examples/react-native-expo-router/src/app/(tabs)/_layout.tsx: -------------------------------------------------------------------------------- 1 | import { Tabs } from 'expo-router/tabs'; 2 | import React from 'react'; 3 | 4 | const AppLayout = () => { 5 | return ( 6 | 12 | 19 | 27 | 28 | ); 29 | }; 30 | 31 | export default AppLayout; 32 | -------------------------------------------------------------------------------- /examples/react-native-expo-router/src/app/_layout.tsx: -------------------------------------------------------------------------------- 1 | import { Stack } from 'expo-router'; 2 | 3 | const StackLayout = () => { 4 | return ( 5 | 6 | 7 | 8 | 9 | ); 10 | }; 11 | 12 | export default StackLayout; 13 | -------------------------------------------------------------------------------- /examples/react-native-expo-router/src/app/details/[id].tsx: -------------------------------------------------------------------------------- 1 | import { Stack, useLocalSearchParams } from 'expo-router'; 2 | import { View, Text } from 'react-native'; 3 | 4 | const DetailsPage = () => { 5 | const { id } = useLocalSearchParams(); 6 | 7 | return ( 8 | 9 | 10 | Details page for element #{id} 11 | 12 | ); 13 | }; 14 | 15 | export default DetailsPage; 16 | -------------------------------------------------------------------------------- /examples/react-native-expo-router/src/app/index.tsx: -------------------------------------------------------------------------------- 1 | import { Redirect } from 'expo-router'; 2 | 3 | const IndexPage = () => ; 4 | 5 | export default IndexPage; 6 | -------------------------------------------------------------------------------- /examples/react-native-expo-router/src/components/Button.tsx: -------------------------------------------------------------------------------- 1 | import { Link } from 'expo-router'; 2 | 3 | // this is an example component to show the absolute import path in home.tsx 4 | export default function Button() { 5 | return View element #1; 6 | } 7 | -------------------------------------------------------------------------------- /examples/react-native-expo-router/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true, 5 | "baseUrl": ".", 6 | "paths": { 7 | "@/*": ["src/*"], 8 | }, 9 | }, 10 | } 11 | -------------------------------------------------------------------------------- /examples/react-vite-capacitor-example/.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | indent_style = space 8 | indent_size = 2 9 | end_of_line = lf 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | insert_final_newline = false 15 | trim_trailing_whitespace = false 16 | -------------------------------------------------------------------------------- /examples/react-vite-capacitor-example/.env.example: -------------------------------------------------------------------------------- 1 | VITE_APP_BASE_URL= 2 | -------------------------------------------------------------------------------- /examples/react-vite-capacitor-example/.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | 3 | # Ignore artifacts: 4 | coverage/ 5 | dist/ 6 | dev-dist/ 7 | public/ 8 | __mocks__/ 9 | 10 | jest.config.js 11 | postcss.config.js 12 | *.d.ts 13 | 14 | src/theme/ 15 | tools/ 16 | -------------------------------------------------------------------------------- /examples/react-vite-capacitor-example/.markdownlint.json: -------------------------------------------------------------------------------- 1 | { 2 | "MD041": false, 3 | "MD042": false, 4 | "MD004": false, 5 | "MD013": false, 6 | "MD033": false 7 | } 8 | -------------------------------------------------------------------------------- /examples/react-vite-capacitor-example/.node-version: -------------------------------------------------------------------------------- 1 | v18.15.0 2 | -------------------------------------------------------------------------------- /examples/react-vite-capacitor-example/.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | 3 | # Ignore artifacts: 4 | coverage/ 5 | dist/ 6 | dev-dist/ 7 | public/ 8 | __mocks__/ 9 | 10 | jest.config.js 11 | postcss.config.js 12 | *.d.ts 13 | 14 | src/theme/ 15 | -------------------------------------------------------------------------------- /examples/react-vite-capacitor-example/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | semi: true, 3 | trailingComma: 'all', 4 | singleQuote: true, 5 | printWidth: 120, 6 | tabWidth: 2, 7 | }; 8 | -------------------------------------------------------------------------------- /examples/react-vite-capacitor-example/docs/README.md: -------------------------------------------------------------------------------- 1 | # Extra Documentation 2 | 3 | This folder contains extra documentation for the project such us project structure, configuration, etc. 4 | 5 | ## Resources 6 | 7 | - [Project Structure](./PROJECT_STRUCTURE.md) 8 | - [Project Configuration](./PROJECT_CONFIGURATION.md) 9 | - [Components and Styling](./COMPONENTS_AND_STYLING.md) 10 | - [Performance recommendations](./PERFORMANCE.md) 11 | - [State Management recommendations](./STATE_MANAGEMENT.md) 12 | -------------------------------------------------------------------------------- /examples/react-vite-capacitor-example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | react-vite-capacitor-example 12 | 13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /examples/react-vite-capacitor-example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nanlabs/frontend-reference/107c237e77d1e039c54d84b6b4e55ea0cc67863e/examples/react-vite-capacitor-example/public/favicon.ico -------------------------------------------------------------------------------- /examples/react-vite-capacitor-example/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { Suspense } from 'react'; 2 | import { BrowserRouter } from 'react-router-dom'; 3 | 4 | import '@/theme'; 5 | 6 | import Loading from '@/components/Loading'; 7 | import AppRoutes from '@/routes/AppRoutes'; 8 | 9 | const App = () => ( 10 | }> 11 | 12 | 13 | 14 | 15 | ); 16 | 17 | export default App; 18 | -------------------------------------------------------------------------------- /examples/react-vite-capacitor-example/src/components/Animation/Cracked.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | 3 | import './slicer.scss'; 4 | import './cracked.css'; 5 | 6 | export interface CrackedProps { 7 | children?: React.ReactNode; 8 | } 9 | 10 | const Cracked: FC = ({ children }) => ( 11 |
12 |
13 | {new Array(40).fill(1).map((_, i) => ( 14 |
15 | {children} 16 |
17 | ))} 18 |
19 |
20 | ); 21 | 22 | export default Cracked; 23 | -------------------------------------------------------------------------------- /examples/react-vite-capacitor-example/src/components/Loading/Loading.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './loader.scss'; 4 | 5 | const Loading = () =>
; 6 | 7 | export default Loading; 8 | -------------------------------------------------------------------------------- /examples/react-vite-capacitor-example/src/components/Loading/index.ts: -------------------------------------------------------------------------------- 1 | import Loading from './Loading'; 2 | 3 | export default Loading; 4 | -------------------------------------------------------------------------------- /examples/react-vite-capacitor-example/src/components/Loading/loader.scss: -------------------------------------------------------------------------------- 1 | .loader { 2 | animation: loaderSpin 1s linear infinite; 3 | border: 4px solid rgba(0, 0, 0, 0.1); 4 | width: 36px; 5 | height: 36px; 6 | border-radius: 50%; 7 | border-left-color: #09f; 8 | } 9 | 10 | @keyframes loaderSpin { 11 | 0% { 12 | transform: rotate(0deg); 13 | } 14 | 15 | 100% { 16 | transform: rotate(360deg); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/react-vite-capacitor-example/src/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.svg" { 2 | import React = require("react"); 3 | export const ReactComponent: React.FC>; 4 | const src: string; 5 | export default src; 6 | } 7 | 8 | declare module "*.jpg" { 9 | const content: string; 10 | export default content; 11 | } 12 | 13 | declare module "*.png" { 14 | const content: string; 15 | export default content; 16 | } 17 | 18 | declare module "*.json" { 19 | const content: string; 20 | export default content; 21 | } 22 | -------------------------------------------------------------------------------- /examples/react-vite-capacitor-example/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { createRoot } from 'react-dom/client'; 3 | 4 | import reportWebVitals from '@/report-web-vitals'; 5 | import App from '@/App'; 6 | 7 | const root = createRoot(document.getElementById('root') as HTMLElement); 8 | root.render( 9 | 10 | 11 | , 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(console.log); 18 | -------------------------------------------------------------------------------- /examples/react-vite-capacitor-example/src/pages/Landing.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: rgba(20, 5, 5, 1); 3 | height: 100vh; 4 | overflow: hidden; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | color: #fff; 9 | perspective: 800px; 10 | } 11 | -------------------------------------------------------------------------------- /examples/react-vite-capacitor-example/src/pages/Landing.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Cracked from '@/components/Animation/Cracked'; 3 | 4 | import './Landing.css'; 5 | 6 | const Landing = () => react-vite-capacitor-example ; 7 | 8 | export default Landing; 9 | -------------------------------------------------------------------------------- /examples/react-vite-capacitor-example/src/report-web-vitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler): void => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /examples/react-vite-capacitor-example/src/routes/AppRoutes.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Route, Routes } from 'react-router-dom'; 3 | 4 | import Landing from '@/pages/Landing'; 5 | 6 | const AppRoutes = () => ( 7 | 8 | } /> 9 | 10 | ); 11 | 12 | export default AppRoutes; 13 | -------------------------------------------------------------------------------- /examples/react-vite-capacitor-example/src/theme/index.ts: -------------------------------------------------------------------------------- 1 | // Import theme setup and global styles here 2 | -------------------------------------------------------------------------------- /examples/react-vite-capacitor-example/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/react-vite-capacitor-example/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /examples/react-vite-electron-example/.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | indent_style = space 8 | indent_size = 2 9 | end_of_line = lf 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | insert_final_newline = false 15 | trim_trailing_whitespace = false 16 | -------------------------------------------------------------------------------- /examples/react-vite-electron-example/.env.example: -------------------------------------------------------------------------------- 1 | VITE_APP_BASE_URL= 2 | -------------------------------------------------------------------------------- /examples/react-vite-electron-example/.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | 3 | # Ignore artifacts: 4 | coverage/ 5 | dist/ 6 | dev-dist/ 7 | public/ 8 | __mocks__/ 9 | 10 | jest.config.js 11 | postcss.config.js 12 | *.d.ts 13 | 14 | src/theme/ 15 | tools/ 16 | -------------------------------------------------------------------------------- /examples/react-vite-electron-example/.markdownlint.json: -------------------------------------------------------------------------------- 1 | { 2 | "MD041": false, 3 | "MD042": false, 4 | "MD004": false, 5 | "MD013": false, 6 | "MD033": false 7 | } 8 | -------------------------------------------------------------------------------- /examples/react-vite-electron-example/.node-version: -------------------------------------------------------------------------------- 1 | v18.15.0 2 | -------------------------------------------------------------------------------- /examples/react-vite-electron-example/.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | 3 | # Ignore artifacts: 4 | coverage/ 5 | dist/ 6 | dev-dist/ 7 | public/ 8 | __mocks__/ 9 | 10 | jest.config.js 11 | postcss.config.js 12 | *.d.ts 13 | 14 | src/theme/ 15 | -------------------------------------------------------------------------------- /examples/react-vite-electron-example/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | semi: true, 3 | trailingComma: 'all', 4 | singleQuote: true, 5 | printWidth: 120, 6 | tabWidth: 2, 7 | }; 8 | -------------------------------------------------------------------------------- /examples/react-vite-electron-example/docs/README.md: -------------------------------------------------------------------------------- 1 | # Extra Documentation 2 | 3 | This folder contains extra documentation for the project such us project structure, configuration, etc. 4 | 5 | ## Resources 6 | 7 | - [Project Structure](./PROJECT_STRUCTURE.md) 8 | - [Project Configuration](./PROJECT_CONFIGURATION.md) 9 | - [Components and Styling](./COMPONENTS_AND_STYLING.md) 10 | - [Performance recommendations](./PERFORMANCE.md) 11 | - [State Management recommendations](./STATE_MANAGEMENT.md) 12 | -------------------------------------------------------------------------------- /examples/react-vite-electron-example/electron/main.js: -------------------------------------------------------------------------------- 1 | import { app, BrowserWindow } from 'electron' 2 | 3 | app.whenReady().then(() => { 4 | const win = new BrowserWindow() 5 | 6 | if (process.env.VITE_DEV_SERVER_URL) { 7 | win.loadURL(process.env.VITE_DEV_SERVER_URL) 8 | } else { 9 | win.loadFile('dist/index.html') 10 | } 11 | }) -------------------------------------------------------------------------------- /examples/react-vite-electron-example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | react-vite-electron-example 12 | 13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /examples/react-vite-electron-example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nanlabs/frontend-reference/107c237e77d1e039c54d84b6b4e55ea0cc67863e/examples/react-vite-electron-example/public/favicon.ico -------------------------------------------------------------------------------- /examples/react-vite-electron-example/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { Suspense } from 'react'; 2 | import { BrowserRouter } from 'react-router-dom'; 3 | 4 | import '@/theme'; 5 | 6 | import Loading from '@/components/Loading'; 7 | import AppRoutes from '@/routes/AppRoutes'; 8 | 9 | const App = () => ( 10 | }> 11 | 12 | 13 | 14 | 15 | ); 16 | 17 | export default App; 18 | -------------------------------------------------------------------------------- /examples/react-vite-electron-example/src/components/Animation/Cracked.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | 3 | import './slicer.scss'; 4 | import './cracked.css'; 5 | 6 | export interface CrackedProps { 7 | children?: React.ReactNode; 8 | } 9 | 10 | const Cracked: FC = ({ children }) => ( 11 |
12 |
13 | {new Array(40).fill(1).map((_, i) => ( 14 |
15 | {children} 16 |
17 | ))} 18 |
19 |
20 | ); 21 | 22 | export default Cracked; 23 | -------------------------------------------------------------------------------- /examples/react-vite-electron-example/src/components/Loading/Loading.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './loader.scss'; 4 | 5 | const Loading = () =>
; 6 | 7 | export default Loading; 8 | -------------------------------------------------------------------------------- /examples/react-vite-electron-example/src/components/Loading/index.ts: -------------------------------------------------------------------------------- 1 | import Loading from './Loading'; 2 | 3 | export default Loading; 4 | -------------------------------------------------------------------------------- /examples/react-vite-electron-example/src/components/Loading/loader.scss: -------------------------------------------------------------------------------- 1 | .loader { 2 | animation: loaderSpin 1s linear infinite; 3 | border: 4px solid rgba(0, 0, 0, 0.1); 4 | width: 36px; 5 | height: 36px; 6 | border-radius: 50%; 7 | border-left-color: #09f; 8 | } 9 | 10 | @keyframes loaderSpin { 11 | 0% { 12 | transform: rotate(0deg); 13 | } 14 | 15 | 100% { 16 | transform: rotate(360deg); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/react-vite-electron-example/src/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.svg" { 2 | import React = require("react"); 3 | export const ReactComponent: React.FC>; 4 | const src: string; 5 | export default src; 6 | } 7 | 8 | declare module "*.jpg" { 9 | const content: string; 10 | export default content; 11 | } 12 | 13 | declare module "*.png" { 14 | const content: string; 15 | export default content; 16 | } 17 | 18 | declare module "*.json" { 19 | const content: string; 20 | export default content; 21 | } 22 | -------------------------------------------------------------------------------- /examples/react-vite-electron-example/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { createRoot } from 'react-dom/client'; 3 | 4 | import reportWebVitals from '@/report-web-vitals'; 5 | import App from '@/App'; 6 | 7 | const root = createRoot(document.getElementById('root') as HTMLElement); 8 | root.render( 9 | 10 | 11 | , 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(console.log); 18 | -------------------------------------------------------------------------------- /examples/react-vite-electron-example/src/pages/Landing.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: rgba(20, 5, 5, 1); 3 | height: 100vh; 4 | overflow: hidden; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | color: #fff; 9 | perspective: 800px; 10 | } 11 | -------------------------------------------------------------------------------- /examples/react-vite-electron-example/src/pages/Landing.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Cracked from '@/components/Animation/Cracked'; 3 | 4 | import './Landing.css'; 5 | 6 | const Landing = () => react-vite-electron-example; 7 | 8 | export default Landing; 9 | -------------------------------------------------------------------------------- /examples/react-vite-electron-example/src/report-web-vitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler): void => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /examples/react-vite-electron-example/src/routes/AppRoutes.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Route, Routes } from 'react-router-dom'; 3 | 4 | import Landing from '@/pages/Landing'; 5 | 6 | const AppRoutes = () => ( 7 | 8 | } /> 9 | 10 | ); 11 | 12 | export default AppRoutes; 13 | -------------------------------------------------------------------------------- /examples/react-vite-electron-example/src/theme/index.ts: -------------------------------------------------------------------------------- 1 | // Import theme setup and global styles here 2 | -------------------------------------------------------------------------------- /examples/react-vite-electron-example/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/react-vite-electron-example/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /examples/state-management/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /examples/state-management/.node-version: -------------------------------------------------------------------------------- 1 | v16.16.0 -------------------------------------------------------------------------------- /examples/state-management/examples/api-react-query/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/state-management/examples/api-react-query/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | API - React Query 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/state-management/examples/api-react-query/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /examples/state-management/examples/api-react-query/public/names.json: -------------------------------------------------------------------------------- 1 | { 2 | "names": ["Jack", "Jill", "John", "Joe"] 3 | } 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/api-react-query/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/api-react-query/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /examples/state-management/examples/api-react-query/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/state-management/examples/api-react-query/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 3 | theme: { 4 | extend: {}, 5 | }, 6 | plugins: [], 7 | }; 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/api-react-query/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": false, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["./src"] 20 | } 21 | -------------------------------------------------------------------------------- /examples/state-management/examples/api-react-query/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/api-swr/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/state-management/examples/api-swr/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | API - React Query 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/state-management/examples/api-swr/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "api-swr", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite --port 3009", 6 | "build": "tsc && vite build", 7 | "preview": "vite preview", 8 | "clean": "rm -fr node_modules || true" 9 | }, 10 | "dependencies": { 11 | "react": "^17.0.2", 12 | "react-dom": "^17.0.2", 13 | "react-use": "^17.3.1", 14 | "swr": "^2.2.4" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^17.0.33", 18 | "@types/react-dom": "^17.0.10", 19 | "@vitejs/plugin-react": "^1.0.7", 20 | "autoprefixer": "^10.4.1", 21 | "postcss": "^8.4.31", 22 | "tailwindcss": "^3.0.8", 23 | "typescript": "^4.4.4", 24 | "vite": "^2.9.16" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /examples/state-management/examples/api-swr/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /examples/state-management/examples/api-swr/public/names.json: -------------------------------------------------------------------------------- 1 | { 2 | "names": ["Jack", "Jill", "John", "Joe"] 3 | } 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/api-swr/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/api-swr/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /examples/state-management/examples/api-swr/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/state-management/examples/api-swr/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 3 | theme: { 4 | extend: {}, 5 | }, 6 | plugins: [], 7 | }; 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/api-swr/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": false, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["./src"] 20 | } 21 | -------------------------------------------------------------------------------- /examples/state-management/examples/api-swr/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/atomic-agilets/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/state-management/examples/atomic-agilets/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Atomic - AgileTs 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/state-management/examples/atomic-agilets/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /examples/state-management/examples/atomic-agilets/public/names.json: -------------------------------------------------------------------------------- 1 | { 2 | "names": ["Jack", "Jill", "John", "Joe"] 3 | } 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/atomic-agilets/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/atomic-agilets/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /examples/state-management/examples/atomic-agilets/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/state-management/examples/atomic-agilets/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 3 | theme: { 4 | extend: {}, 5 | }, 6 | plugins: [], 7 | }; 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/atomic-agilets/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": false, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["./src"] 20 | } 21 | -------------------------------------------------------------------------------- /examples/state-management/examples/atomic-agilets/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/atomic-jotai/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/state-management/examples/atomic-jotai/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Atomic - Jotai 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/state-management/examples/atomic-jotai/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "atomic-jotai", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite --port 3006", 6 | "build": "tsc && vite build", 7 | "preview": "vite preview", 8 | "clean": "rm -fr node_modules || true" 9 | }, 10 | "dependencies": { 11 | "jotai": "^1.4.9", 12 | "react": "^17.0.2", 13 | "react-dom": "^17.0.2" 14 | }, 15 | "devDependencies": { 16 | "@types/react": "^17.0.33", 17 | "@types/react-dom": "^17.0.10", 18 | "@vitejs/plugin-react": "^1.0.7", 19 | "autoprefixer": "^10.4.1", 20 | "postcss": "^8.4.5", 21 | "tailwindcss": "^3.0.8", 22 | "typescript": "^4.4.4", 23 | "vite": "^2.7.2" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /examples/state-management/examples/atomic-jotai/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /examples/state-management/examples/atomic-jotai/public/names.json: -------------------------------------------------------------------------------- 1 | { 2 | "names": ["Jack", "Jill", "John", "Joe"] 3 | } 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/atomic-jotai/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/atomic-jotai/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /examples/state-management/examples/atomic-jotai/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/state-management/examples/atomic-jotai/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 3 | theme: { 4 | extend: {}, 5 | }, 6 | plugins: [], 7 | }; 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/atomic-jotai/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": false, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["./src"] 20 | } 21 | -------------------------------------------------------------------------------- /examples/state-management/examples/atomic-jotai/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/atomic-recoil/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/state-management/examples/atomic-recoil/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Atomic - Recoil 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/state-management/examples/atomic-recoil/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "atomic-recoil", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite --port 3009", 6 | "build": "tsc && vite build", 7 | "preview": "vite preview", 8 | "clean": "rm -fr node_modules || true" 9 | }, 10 | "dependencies": { 11 | "react": "^17.0.2", 12 | "react-dom": "^17.0.2", 13 | "recoil": "^0.5.2" 14 | }, 15 | "devDependencies": { 16 | "@types/react": "^17.0.33", 17 | "@types/react-dom": "^17.0.10", 18 | "@vitejs/plugin-react": "^1.0.7", 19 | "autoprefixer": "^10.4.1", 20 | "postcss": "^8.4.5", 21 | "tailwindcss": "^3.0.8", 22 | "typescript": "^4.4.4", 23 | "vite": "^2.7.2" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /examples/state-management/examples/atomic-recoil/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /examples/state-management/examples/atomic-recoil/public/names.json: -------------------------------------------------------------------------------- 1 | { 2 | "names": ["Jack", "Jill", "John", "Joe"] 3 | } 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/atomic-recoil/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/atomic-recoil/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /examples/state-management/examples/atomic-recoil/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/state-management/examples/atomic-recoil/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 3 | theme: { 4 | extend: {}, 5 | }, 6 | plugins: [], 7 | }; 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/atomic-recoil/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": false, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["./src"] 20 | } 21 | -------------------------------------------------------------------------------- /examples/state-management/examples/atomic-recoil/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-easy-state/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-easy-state/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bidirectional - Easy State 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-easy-state/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-easy-state/public/names.json: -------------------------------------------------------------------------------- 1 | { 2 | "names": ["Jack", "Jill", "John", "Joe"] 3 | } 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-easy-state/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-easy-state/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-easy-state/src/store.tsx: -------------------------------------------------------------------------------- 1 | import { store } from "@risingstack/react-easy-state"; 2 | 3 | export const stopwatch = store<{ 4 | seconds: number; 5 | running: boolean; 6 | names?: string[]; 7 | }>({ 8 | seconds: 0, 9 | running: false, 10 | }); 11 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-easy-state/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-easy-state/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 3 | theme: { 4 | extend: {}, 5 | }, 6 | plugins: [], 7 | }; 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-easy-state/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": false, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["./src"] 20 | } 21 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-easy-state/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-mobx-state-tree/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-mobx-state-tree/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bidirectional - MobX State Tree 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-mobx-state-tree/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-mobx-state-tree/public/names.json: -------------------------------------------------------------------------------- 1 | { 2 | "names": ["Jack", "Jill", "John", "Joe"] 3 | } 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-mobx-state-tree/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-mobx-state-tree/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-mobx-state-tree/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-mobx-state-tree/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 3 | theme: { 4 | extend: {}, 5 | }, 6 | plugins: [], 7 | }; 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-mobx-state-tree/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": false, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["./src"] 20 | } 21 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-mobx-state-tree/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-mobx/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-mobx/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bidirectional - MobX 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-mobx/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-mobx/public/names.json: -------------------------------------------------------------------------------- 1 | { 2 | "names": ["Jack", "Jill", "John", "Joe"] 3 | } 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-mobx/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-mobx/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-mobx/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-mobx/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 3 | theme: { 4 | extend: {}, 5 | }, 6 | plugins: [], 7 | }; 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-mobx/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": false, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["./src"] 20 | } 21 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-mobx/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-valtio/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-valtio/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bidirectional - Valtio 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-valtio/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bidirectional-valtio", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite --port 3005", 6 | "build": "tsc && vite build", 7 | "preview": "vite preview", 8 | "clean": "rm -fr node_modules || true" 9 | }, 10 | "dependencies": { 11 | "react": "^17.0.2", 12 | "react-dom": "^17.0.2", 13 | "valtio": "^1.2.7" 14 | }, 15 | "devDependencies": { 16 | "@types/react": "^17.0.33", 17 | "@types/react-dom": "^17.0.10", 18 | "@vitejs/plugin-react": "^1.0.7", 19 | "autoprefixer": "^10.4.1", 20 | "postcss": "^8.4.5", 21 | "tailwindcss": "^3.0.8", 22 | "typescript": "^4.4.4", 23 | "vite": "^2.7.2" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-valtio/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-valtio/public/names.json: -------------------------------------------------------------------------------- 1 | { 2 | "names": ["Jack", "Jill", "John", "Joe"] 3 | } 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-valtio/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-valtio/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-valtio/src/store.tsx: -------------------------------------------------------------------------------- 1 | import { proxy } from "valtio"; 2 | 3 | interface ApplicationState { 4 | seconds: number; 5 | running: boolean; 6 | names?: string[]; 7 | } 8 | 9 | export const store = proxy({ 10 | seconds: 0, 11 | running: false, 12 | names: undefined, 13 | }); 14 | 15 | export const onToggle = () => (store.running = !store.running); 16 | 17 | setInterval(() => { 18 | if (store.running) { 19 | store.seconds += 0.1; 20 | if (store.seconds > 2 && !store.names) { 21 | fetch("/names.json") 22 | .then((res) => res.json()) 23 | .then(({ names }) => (store.names = names)); 24 | } 25 | } 26 | }, 100); 27 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-valtio/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-valtio/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 3 | theme: { 4 | extend: {}, 5 | }, 6 | plugins: [], 7 | }; 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-valtio/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": false, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["./src"] 20 | } 21 | -------------------------------------------------------------------------------- /examples/state-management/examples/bidirectional-valtio/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/fsm-xstate/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/state-management/examples/fsm-xstate/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | FSM - XState 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/state-management/examples/fsm-xstate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fsm-xstate", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite --port 3007", 6 | "build": "tsc && vite build", 7 | "preview": "vite preview", 8 | "clean": "rm -fr node_modules || true" 9 | }, 10 | "dependencies": { 11 | "@xstate/react": "^1.6.3", 12 | "react": "^17.0.2", 13 | "react-dom": "^17.0.2", 14 | "xstate": "^4.26.1" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^17.0.33", 18 | "@types/react-dom": "^17.0.10", 19 | "@vitejs/plugin-react": "^1.0.7", 20 | "autoprefixer": "^10.4.1", 21 | "postcss": "^8.4.5", 22 | "tailwindcss": "^3.0.8", 23 | "typescript": "^4.4.4", 24 | "vite": "^2.7.2" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /examples/state-management/examples/fsm-xstate/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /examples/state-management/examples/fsm-xstate/public/names.json: -------------------------------------------------------------------------------- 1 | { 2 | "names": ["Jack", "Jill", "John", "Joe"] 3 | } 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/fsm-xstate/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/fsm-xstate/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /examples/state-management/examples/fsm-xstate/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/state-management/examples/fsm-xstate/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 3 | theme: { 4 | extend: {}, 5 | }, 6 | plugins: [], 7 | }; 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/fsm-xstate/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": false, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["./src"] 20 | } 21 | -------------------------------------------------------------------------------- /examples/state-management/examples/fsm-xstate/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-constate/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-constate/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hooks - Constate 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-constate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hooks-constate", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite --port 3011", 6 | "build": "tsc && vite build", 7 | "preview": "vite preview", 8 | "clean": "rm -fr node_modules || true" 9 | }, 10 | "dependencies": { 11 | "constate": "^3.3.0", 12 | "react": "^17.0.2", 13 | "react-dom": "^17.0.2" 14 | }, 15 | "devDependencies": { 16 | "@types/react": "^17.0.33", 17 | "@types/react-dom": "^17.0.10", 18 | "@vitejs/plugin-react": "^1.0.7", 19 | "autoprefixer": "^10.4.1", 20 | "postcss": "^8.4.5", 21 | "tailwindcss": "^3.0.8", 22 | "typescript": "^4.4.4", 23 | "vite": "^2.7.2" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-constate/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-constate/public/names.json: -------------------------------------------------------------------------------- 1 | { 2 | "names": ["Jack", "Jill", "John", "Joe"] 3 | } 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-constate/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-constate/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-constate/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-constate/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 3 | theme: { 4 | extend: {}, 5 | }, 6 | plugins: [], 7 | }; 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-constate/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": false, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["./src"] 20 | } 21 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-constate/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-context/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-context/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hooks - Context 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-context/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hooks-context", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite --port 3001", 6 | "build": "tsc && vite build", 7 | "preview": "vite preview", 8 | "clean": "rm -fr node_modules || true" 9 | }, 10 | "dependencies": { 11 | "react": "^17.0.2", 12 | "react-dom": "^17.0.2" 13 | }, 14 | "devDependencies": { 15 | "@types/react": "^17.0.33", 16 | "@types/react-dom": "^17.0.10", 17 | "@vitejs/plugin-react": "^1.0.7", 18 | "autoprefixer": "^10.4.1", 19 | "postcss": "^8.4.5", 20 | "tailwindcss": "^3.0.8", 21 | "typescript": "^4.4.4", 22 | "vite": "^2.7.2" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-context/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-context/public/names.json: -------------------------------------------------------------------------------- 1 | { 2 | "names": ["Jack", "Jill", "John", "Joe"] 3 | } 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-context/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-context/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-context/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-context/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 3 | theme: { 4 | extend: {}, 5 | }, 6 | plugins: [], 7 | }; 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-context/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": false, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["./src"] 20 | } 21 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-context/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-global-state/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-global-state/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hooks - Global State 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-global-state/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hooks-global-state", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite --port 3016", 6 | "build": "tsc && vite build", 7 | "preview": "vite preview", 8 | "clean": "rm -fr node_modules || true" 9 | }, 10 | "dependencies": { 11 | "react": "^17.0.2", 12 | "react-dom": "^17.0.2", 13 | "react-hooks-global-state": "^1.0.2" 14 | }, 15 | "devDependencies": { 16 | "@types/react": "^17.0.33", 17 | "@types/react-dom": "^17.0.10", 18 | "@vitejs/plugin-react": "^1.0.7", 19 | "autoprefixer": "^10.4.1", 20 | "postcss": "^8.4.5", 21 | "tailwindcss": "^3.0.8", 22 | "typescript": "^4.4.4", 23 | "vite": "^2.7.2" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-global-state/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-global-state/public/names.json: -------------------------------------------------------------------------------- 1 | { 2 | "names": ["Jack", "Jill", "John", "Joe"] 3 | } 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-global-state/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-global-state/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-global-state/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-global-state/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 3 | theme: { 4 | extend: {}, 5 | }, 6 | plugins: [], 7 | }; 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-global-state/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": false, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["./src"] 20 | } 21 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-global-state/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-hookstate/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-hookstate/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hooks - Hookstate 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-hookstate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hooks-hookstate", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite --port 3018", 6 | "build": "tsc && vite build", 7 | "preview": "vite preview", 8 | "clean": "rm -fr node_modules || true" 9 | }, 10 | "dependencies": { 11 | "@hookstate/core": "^3.0.13", 12 | "react": "^17.0.2", 13 | "react-dom": "^17.0.2" 14 | }, 15 | "devDependencies": { 16 | "@types/react": "^17.0.33", 17 | "@types/react-dom": "^17.0.10", 18 | "@vitejs/plugin-react": "^1.0.7", 19 | "autoprefixer": "^10.4.1", 20 | "postcss": "^8.4.5", 21 | "tailwindcss": "^3.0.8", 22 | "typescript": "^4.4.4", 23 | "vite": "^2.7.2" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-hookstate/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-hookstate/public/names.json: -------------------------------------------------------------------------------- 1 | { 2 | "names": ["Jack", "Jill", "John", "Joe"] 3 | } 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-hookstate/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-hookstate/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-hookstate/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-hookstate/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 3 | theme: { 4 | extend: {}, 5 | }, 6 | plugins: [], 7 | }; 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-hookstate/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": false, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["./src"] 20 | } 21 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-hookstate/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-prop-drilling/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-prop-drilling/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hooks - Prop Drilling 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-prop-drilling/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "prop-drilling", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite --port 3000", 6 | "build": "tsc && vite build", 7 | "preview": "vite preview", 8 | "clean": "rm -fr node_modules || true" 9 | }, 10 | "dependencies": { 11 | "react": "^17.0.2", 12 | "react-dom": "^17.0.2" 13 | }, 14 | "devDependencies": { 15 | "@types/react": "^17.0.33", 16 | "@types/react-dom": "^17.0.10", 17 | "@vitejs/plugin-react": "^1.0.7", 18 | "autoprefixer": "^10.4.1", 19 | "postcss": "^8.4.5", 20 | "tailwindcss": "^3.0.8", 21 | "typescript": "^4.4.4", 22 | "vite": "^2.7.2" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-prop-drilling/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-prop-drilling/public/names.json: -------------------------------------------------------------------------------- 1 | { 2 | "names": ["Jack", "Jill", "John", "Joe"] 3 | } 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-prop-drilling/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-prop-drilling/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-prop-drilling/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-prop-drilling/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 3 | theme: { 4 | extend: {}, 5 | }, 6 | plugins: [], 7 | }; 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-prop-drilling/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": false, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["./src"] 20 | } 21 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-prop-drilling/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-teaful/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-teaful/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hooks - Teaful 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-teaful/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hooks-teaful", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite --port 3021", 6 | "build": "tsc && vite build", 7 | "preview": "vite preview", 8 | "clean": "rm -fr node_modules || true" 9 | }, 10 | "dependencies": { 11 | "react": "^17.0.2", 12 | "react-dom": "^17.0.2", 13 | "teaful": "^0.9.2" 14 | }, 15 | "devDependencies": { 16 | "@types/react": "^17.0.33", 17 | "@types/react-dom": "^17.0.10", 18 | "@vitejs/plugin-react": "^1.0.7", 19 | "autoprefixer": "^10.4.1", 20 | "postcss": "^8.4.5", 21 | "tailwindcss": "^3.0.8", 22 | "typescript": "^4.4.4", 23 | "vite": "^2.7.2" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-teaful/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-teaful/public/names.json: -------------------------------------------------------------------------------- 1 | { 2 | "names": ["Jack", "Jill", "John", "Joe"] 3 | } 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-teaful/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-teaful/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-teaful/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-teaful/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 3 | theme: { 4 | extend: {}, 5 | }, 6 | plugins: [], 7 | }; 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-teaful/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": false, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["./src"] 20 | } 21 | -------------------------------------------------------------------------------- /examples/state-management/examples/hooks-teaful/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-akita/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-akita/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Reactive - Akita 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-akita/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-akita/public/names.json: -------------------------------------------------------------------------------- 1 | { 2 | "names": ["Jack", "Jill", "John", "Joe"] 3 | } 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-akita/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-akita/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-akita/src/stopwatch.store.ts: -------------------------------------------------------------------------------- 1 | import { Store, StoreConfig } from "@datorama/akita"; 2 | 3 | export interface StopwatchState { 4 | seconds: number; 5 | running: boolean; 6 | names?: string[]; 7 | } 8 | 9 | export function createInitialState(): StopwatchState { 10 | return { 11 | seconds: 0, 12 | running: false, 13 | }; 14 | } 15 | 16 | @StoreConfig({ name: "stopwatch" }) 17 | export class StopwatchStore extends Store { 18 | constructor() { 19 | super(createInitialState()); 20 | } 21 | } 22 | 23 | export const stopwatchStore = new StopwatchStore(); 24 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-akita/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-akita/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 3 | theme: { 4 | extend: {}, 5 | }, 6 | plugins: [], 7 | }; 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-akita/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": false, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx", 18 | "experimentalDecorators": true 19 | }, 20 | "include": ["./src"] 21 | } 22 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-akita/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-effector/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-effector/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Reactive - Effector 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-effector/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-effector/public/names.json: -------------------------------------------------------------------------------- 1 | { 2 | "names": ["Jack", "Jill", "John", "Joe"] 3 | } 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-effector/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-effector/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-effector/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-effector/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 3 | theme: { 4 | extend: {}, 5 | }, 6 | plugins: [], 7 | }; 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-effector/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": false, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["./src"] 20 | } 21 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-effector/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-rxjs/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-rxjs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Reactive - RxJS 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-rxjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reactive-rxjs", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite --port 3013", 6 | "build": "tsc && vite build", 7 | "preview": "vite preview", 8 | "clean": "rm -fr node_modules || true" 9 | }, 10 | "dependencies": { 11 | "observable-hooks": "^4.2.0", 12 | "react": "^17.0.2", 13 | "react-dom": "^17.0.2", 14 | "rxjs": "^7.5.1" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^17.0.33", 18 | "@types/react-dom": "^17.0.10", 19 | "@vitejs/plugin-react": "^1.0.7", 20 | "autoprefixer": "^10.4.1", 21 | "postcss": "^8.4.5", 22 | "tailwindcss": "^3.0.8", 23 | "typescript": "^4.4.4", 24 | "vite": "^2.7.2" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-rxjs/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-rxjs/public/names.json: -------------------------------------------------------------------------------- 1 | { 2 | "names": ["Jack", "Jill", "John", "Joe"] 3 | } 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-rxjs/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-rxjs/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-rxjs/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-rxjs/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 3 | theme: { 4 | extend: {}, 5 | }, 6 | plugins: [], 7 | }; 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-rxjs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": false, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["./src"] 20 | } 21 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-rxjs/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-storeon/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-storeon/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Reactive - Storeon 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-storeon/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reactive-storeon", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite --port 3020", 6 | "build": "tsc && vite build", 7 | "preview": "vite preview", 8 | "clean": "rm -fr node_modules || true" 9 | }, 10 | "dependencies": { 11 | "react": "^17.0.2", 12 | "react-dom": "^17.0.2", 13 | "storeon": "^3.1.4" 14 | }, 15 | "devDependencies": { 16 | "@types/react": "^17.0.33", 17 | "@types/react-dom": "^17.0.10", 18 | "@vitejs/plugin-react": "^1.0.7", 19 | "autoprefixer": "^10.4.1", 20 | "postcss": "^8.4.5", 21 | "tailwindcss": "^3.0.8", 22 | "typescript": "^4.4.4", 23 | "vite": "^2.7.2" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-storeon/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-storeon/public/names.json: -------------------------------------------------------------------------------- 1 | { 2 | "names": ["Jack", "Jill", "John", "Joe"] 3 | } 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-storeon/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-storeon/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-storeon/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-storeon/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 3 | theme: { 4 | extend: {}, 5 | }, 6 | plugins: [], 7 | }; 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-storeon/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": false, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["./src"] 20 | } 21 | -------------------------------------------------------------------------------- /examples/state-management/examples/reactive-storeon/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-redux-toolkit/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-redux-toolkit/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Unidirectional - Redux Toolkit 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-redux-toolkit/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-redux-toolkit/public/names.json: -------------------------------------------------------------------------------- 1 | { 2 | "names": ["Jack", "Jill", "John", "Joe"] 3 | } 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-redux-toolkit/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-redux-toolkit/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-redux-toolkit/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-redux-toolkit/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 3 | theme: { 4 | extend: {}, 5 | }, 6 | plugins: [], 7 | }; 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-redux-toolkit/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": false, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["./src"] 20 | } 21 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-redux-toolkit/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-rematch/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-rematch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Unidirectional - Rematch 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-rematch/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-rematch/public/names.json: -------------------------------------------------------------------------------- 1 | { 2 | "names": ["Jack", "Jill", "John", "Joe"] 3 | } 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-rematch/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-rematch/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-rematch/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-rematch/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 3 | theme: { 4 | extend: {}, 5 | }, 6 | plugins: [], 7 | }; 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-rematch/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": false, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["./src"] 20 | } 21 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-rematch/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-unistore/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-unistore/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Unidirectional - Unistore 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-unistore/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "unidirectional-unistore", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite --port 3014", 6 | "build": "tsc && vite build", 7 | "preview": "vite preview", 8 | "clean": "rm -fr node_modules || true" 9 | }, 10 | "dependencies": { 11 | "react": "^17.0.2", 12 | "react-dom": "^17.0.2", 13 | "unistore": "^3.5.2" 14 | }, 15 | "devDependencies": { 16 | "@types/react": "^17.0.33", 17 | "@types/react-dom": "^17.0.10", 18 | "@vitejs/plugin-react": "^1.0.7", 19 | "autoprefixer": "^10.4.1", 20 | "postcss": "^8.4.5", 21 | "tailwindcss": "^3.0.8", 22 | "typescript": "^4.4.4", 23 | "vite": "^2.7.2" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-unistore/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-unistore/public/names.json: -------------------------------------------------------------------------------- 1 | { 2 | "names": ["Jack", "Jill", "John", "Joe"] 3 | } 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-unistore/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-unistore/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-unistore/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-unistore/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 3 | theme: { 4 | extend: {}, 5 | }, 6 | plugins: [], 7 | }; 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-unistore/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": false, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["./src"] 20 | } 21 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-unistore/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-zustand/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-zustand/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Unidirectional - Zustand 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-zustand/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "unidirectional-zustand", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite --port 3002", 6 | "build": "tsc && vite build", 7 | "preview": "vite preview", 8 | "clean": "rm -fr node_modules || true" 9 | }, 10 | "dependencies": { 11 | "react": "^17.0.2", 12 | "react-dom": "^17.0.2", 13 | "zustand": "^3.6.8" 14 | }, 15 | "devDependencies": { 16 | "@types/react": "^17.0.33", 17 | "@types/react-dom": "^17.0.10", 18 | "@vitejs/plugin-react": "^1.0.7", 19 | "autoprefixer": "^10.4.1", 20 | "postcss": "^8.4.5", 21 | "tailwindcss": "^3.0.8", 22 | "typescript": "^4.4.4", 23 | "vite": "^2.7.2" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-zustand/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-zustand/public/names.json: -------------------------------------------------------------------------------- 1 | { 2 | "names": ["Jack", "Jill", "John", "Joe"] 3 | } 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-zustand/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-zustand/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-zustand/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-zustand/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 3 | theme: { 4 | extend: {}, 5 | }, 6 | plugins: [], 7 | }; 8 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-zustand/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": false, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["./src"] 20 | } 21 | -------------------------------------------------------------------------------- /examples/state-management/examples/unidirectional-zustand/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /examples/state-management/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "packages", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "private": true, 6 | "license": "MIT", 7 | "scripts": { 8 | "start": "concurrently \"wsrun --parallel dev\"", 9 | "clean": "npm run clean:projects && npm run clean:top", 10 | "clean:top": "rm -fr node_modules || true", 11 | "clean:projects": "concurrently \"wsrun --parallel clean\"" 12 | }, 13 | "workspaces": [ 14 | "examples/*" 15 | ], 16 | "devDependencies": { 17 | "concurrently": "^5.2.0", 18 | "wsrun": "^5.2.0" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/styled-components-vs-tailwindcss/images/comparative-001.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nanlabs/frontend-reference/107c237e77d1e039c54d84b6b4e55ea0cc67863e/examples/styled-components-vs-tailwindcss/images/comparative-001.png -------------------------------------------------------------------------------- /examples/styled-components-vs-tailwindcss/images/comparative-002.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nanlabs/frontend-reference/107c237e77d1e039c54d84b6b4e55ea0cc67863e/examples/styled-components-vs-tailwindcss/images/comparative-002.png -------------------------------------------------------------------------------- /examples/styled-components-vs-tailwindcss/images/comparative-003.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nanlabs/frontend-reference/107c237e77d1e039c54d84b6b4e55ea0cc67863e/examples/styled-components-vs-tailwindcss/images/comparative-003.png -------------------------------------------------------------------------------- /examples/styled-components-vs-tailwindcss/images/comparative-004.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nanlabs/frontend-reference/107c237e77d1e039c54d84b6b4e55ea0cc67863e/examples/styled-components-vs-tailwindcss/images/comparative-004.png -------------------------------------------------------------------------------- /examples/styled-components-vs-tailwindcss/images/styled-components-cls.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nanlabs/frontend-reference/107c237e77d1e039c54d84b6b4e55ea0cc67863e/examples/styled-components-vs-tailwindcss/images/styled-components-cls.png -------------------------------------------------------------------------------- /examples/styled-components-vs-tailwindcss/images/styled-components-lighthouse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nanlabs/frontend-reference/107c237e77d1e039c54d84b6b4e55ea0cc67863e/examples/styled-components-vs-tailwindcss/images/styled-components-lighthouse.png -------------------------------------------------------------------------------- /examples/styled-components-vs-tailwindcss/images/tailwind-cls.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nanlabs/frontend-reference/107c237e77d1e039c54d84b6b4e55ea0cc67863e/examples/styled-components-vs-tailwindcss/images/tailwind-cls.png -------------------------------------------------------------------------------- /examples/styled-components-vs-tailwindcss/images/tailwind-lighthouse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nanlabs/frontend-reference/107c237e77d1e039c54d84b6b4e55ea0cc67863e/examples/styled-components-vs-tailwindcss/images/tailwind-lighthouse.png -------------------------------------------------------------------------------- /examples/the-ultimate-react-state-management-framework/images/logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nanlabs/frontend-reference/107c237e77d1e039c54d84b6b4e55ea0cc67863e/examples/the-ultimate-react-state-management-framework/images/logo.webp -------------------------------------------------------------------------------- /tools/danger/.node-version: -------------------------------------------------------------------------------- 1 | v16.17.0 2 | -------------------------------------------------------------------------------- /tools/danger/.nvmrc: -------------------------------------------------------------------------------- 1 | v16.17.0 2 | -------------------------------------------------------------------------------- /tools/danger/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nancy.js", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "directories": { 7 | "example": "examples" 8 | }, 9 | "scripts": { 10 | "test": "echo \"Error: no test specified\" && exit 1" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/nanlabs/nancy.js.git" 15 | }, 16 | "author": "ulises-jeremias", 17 | "license": "MIT", 18 | "bugs": { 19 | "url": "https://github.com/nanlabs/nancy.js/issues" 20 | }, 21 | "homepage": "https://github.com/nanlabs/nancy.js#readme", 22 | "devDependencies": { 23 | "danger": "^11.1.1" 24 | } 25 | } 26 | --------------------------------------------------------------------------------