diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 865b26c1..fedee130 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -68,6 +68,10 @@ jobs: working-directory: example/react-router run: npm run build + - name: example @template/react-router-ts + working-directory: example/react-router-ts + run: npm run build + - name: example @template/rematch-tsx working-directory: example/rematch-tsx run: npm run build @@ -180,6 +184,10 @@ jobs: working-directory: example/react-router run: npm run build + - name: example @template/react-router-ts + working-directory: example/react-router-ts + run: npm run build + - name: example @template/rematch-tsx working-directory: example/rematch-tsx run: npm run build @@ -247,6 +255,11 @@ jobs: working-directory: example/react-router - run: cp -rp example/react-router/react-router.zip ./zip + - name: Compress react-router-ts Example. + run: zip -r -y react-router-ts.zip . -x "node_modules/*" -x "build/*" -x "dist/*" -x "coverage/*" -x ".eslintcache" -x "sandbox.config.json" + working-directory: example/react-router-ts + - run: cp -rp example/react-router-ts/react-router-ts.zip ./zip + - name: Compress rematch-tsx Example. run: zip -r -y rematch-tsx.zip . -x "node_modules/*" -x "build/*" -x "dist/*" -x "coverage/*" -x ".eslintcache" -x "sandbox.config.json" working-directory: example/rematch-tsx diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml index 4ba955c5..6ff04c9f 100644 --- a/.github/workflows/pr.yml +++ b/.github/workflows/pr.yml @@ -57,6 +57,10 @@ jobs: working-directory: example/react-router run: npm run build + - name: example @template/react-router-ts + working-directory: example/react-router-ts + run: npm run build + - name: example @template/rematch-tsx working-directory: example/rematch-tsx run: npm run build diff --git a/example/basic/package.json b/example/basic/package.json index 37dd4cd6..ebcc7f5c 100644 --- a/example/basic/package.json +++ b/example/basic/package.json @@ -19,7 +19,7 @@ "dependencies": { "react": "~18.2.0", "react-dom": "~18.2.0", - "web-vitals": "^2.1.2" + "web-vitals": "^2.1.4" }, "devDependencies": { "kkt": "^7.5.3" diff --git a/example/docs/package.json b/example/docs/package.json index d86f5134..32541d05 100644 --- a/example/docs/package.json +++ b/example/docs/package.json @@ -23,8 +23,8 @@ "dependencies": { "react": "~18.2.0", "react-dom": "~18.2.0", - "react-router-dom": "^6.8.2", - "web-vitals": "^2.1.2" + "react-router-dom": "^6.16.0", + "web-vitals": "^2.1.4" }, "devDependencies": { "@uiw/doc": "^4.21.23", diff --git a/example/electron/package.json b/example/electron/package.json index 5ed82032..658e02f1 100644 --- a/example/electron/package.json +++ b/example/electron/package.json @@ -23,8 +23,8 @@ "license": "MIT", "devDependencies": { "@kkt/less-modules": "^7.5.3", - "@types/react": "~18.2.0", - "@types/react-dom": "~18.2.0", + "@types/react": "^18.2.28", + "@types/react-dom": "^18.2.13", "electron": "~26.2.0", "kkt": "^7.5.3", "tsbb": "^4.1.5" diff --git a/example/react-component-tsx/package.json b/example/react-component-tsx/package.json index befe0c1d..f97739c3 100644 --- a/example/react-component-tsx/package.json +++ b/example/react-component-tsx/package.json @@ -53,8 +53,8 @@ "@kkt/less-modules": "^7.5.3", "@kkt/raw-modules": "^7.5.3", "@kkt/scope-plugin-options": "^7.5.3", - "@types/react": "~18.2.0", - "@types/react-dom": "~18.2.0", + "@types/react": "^18.2.28", + "@types/react-dom": "^18.2.13", "@types/react-test-renderer": "~18.0.0", "compile-less-cli": "~1.9.0", "husky": "~8.0.0", diff --git a/example/react-router-ts/.gitignore b/example/react-router-ts/.gitignore new file mode 100644 index 00000000..4d29575d --- /dev/null +++ b/example/react-router-ts/.gitignore @@ -0,0 +1,23 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/example/react-router-ts/README.md b/example/react-router-ts/README.md new file mode 100644 index 00000000..5ee305da --- /dev/null +++ b/example/react-router-ts/README.md @@ -0,0 +1,31 @@ +Basic Example for react-router-ts +=== + +Use [`react-router`](https://github.com/remix-run/react-router) for the project. + +## Quick Start + +```bash +$ npx create-kkt my-app -e react-router-ts +cd my-app +npm install +``` + +**development** + +Runs the project in development mode. + +```bash +npm run start +``` + +**production** + +Builds the app for production to the build folder. + +```bash +npm run build +``` + +The build is minified and the filenames include the hashes. +Your app is ready to be deployed! diff --git a/example/react-router-ts/package.json b/example/react-router-ts/package.json new file mode 100644 index 00000000..58374bc1 --- /dev/null +++ b/example/react-router-ts/package.json @@ -0,0 +1,45 @@ +{ + "name": "@template/react-router-ts", + "version": "7.5.3", + "private": true, + "dependencies": { + "react": "~18.2.0", + "react-dom": "~18.2.0", + "react-router-dom": "^6.16.0", + "web-vitals": "^2.1.4" + }, + "devDependencies": { + "@testing-library/jest-dom": "^6.0.0", + "@testing-library/react": "^14.0.0", + "@testing-library/user-event": "^14.0.0", + "@types/jest": "^27.5.2", + "@types/node": "^16.18.58", + "@types/react": "^18.2.28", + "@types/react-dom": "^18.2.13", + "kkt": "^7.5.3" + }, + "scripts": { + "start": "kkt start", + "build": "kkt build", + "test": "kkt test --env=jsdom", + "coverage": "kkt test --env=jsdom --coverage" + }, + "eslintConfig": { + "extends": [ + "react-app", + "react-app/jest" + ] + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } +} diff --git a/example/react-router-ts/public/favicon.ico b/example/react-router-ts/public/favicon.ico new file mode 100644 index 00000000..a11777cc Binary files /dev/null and b/example/react-router-ts/public/favicon.ico differ diff --git a/example/react-router-ts/public/index.html b/example/react-router-ts/public/index.html new file mode 100644 index 00000000..b60af466 --- /dev/null +++ b/example/react-router-ts/public/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + + React App + + + +
+ + + diff --git a/example/react-router-ts/public/logo192.png b/example/react-router-ts/public/logo192.png new file mode 100644 index 00000000..fc44b0a3 Binary files /dev/null and b/example/react-router-ts/public/logo192.png differ diff --git a/example/react-router-ts/public/logo512.png b/example/react-router-ts/public/logo512.png new file mode 100644 index 00000000..a4e47a65 Binary files /dev/null and b/example/react-router-ts/public/logo512.png differ diff --git a/example/react-router-ts/public/manifest.json b/example/react-router-ts/public/manifest.json new file mode 100644 index 00000000..080d6c77 --- /dev/null +++ b/example/react-router-ts/public/manifest.json @@ -0,0 +1,25 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + }, + { + "src": "logo192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "logo512.png", + "type": "image/png", + "sizes": "512x512" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/example/react-router-ts/public/robots.txt b/example/react-router-ts/public/robots.txt new file mode 100644 index 00000000..e9e57dc4 --- /dev/null +++ b/example/react-router-ts/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/example/react-router-ts/src/comps/ErrorPage.tsx b/example/react-router-ts/src/comps/ErrorPage.tsx new file mode 100644 index 00000000..56d82480 --- /dev/null +++ b/example/react-router-ts/src/comps/ErrorPage.tsx @@ -0,0 +1,20 @@ +import React, { forwardRef, PropsWithoutRef } from 'react'; +import { useRouteError } from 'react-router-dom'; + +export interface ErrorPageProps extends React.HTMLAttributes {} + +export const ErrorPage = forwardRef>( + ({ children, ...htmlProps }, ref) => { + const error = useRouteError() as Response; + return ( +
+

Oops!

+

Sorry, an unexpected error occurred.

+

+ {error?.status && {error?.status}} + {error?.statusText && {decodeURI(error?.statusText || '')}} +

+
+ ); + }, +); diff --git a/example/react-router-ts/src/comps/Fallback.tsx b/example/react-router-ts/src/comps/Fallback.tsx new file mode 100644 index 00000000..93814e6f --- /dev/null +++ b/example/react-router-ts/src/comps/Fallback.tsx @@ -0,0 +1,113 @@ +import React from 'react'; + +export interface FallbackProps extends React.DetailedHTMLProps, HTMLDivElement> {} +const defaultStyle: React.CSSProperties = { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + gap: '1rem', + left: 0, + right: 0, + top: 0, + bottom: 0, + position: 'absolute', + zIndex: 9999, +}; + +export const Fallback = ({ children, style, ...other }: FallbackProps) => ( +
+ + + + + + + + + + + + + + + + + + + + + + +
{children || 'Loading...'}
+
+); diff --git a/example/react-router-ts/src/comps/Layout.tsx b/example/react-router-ts/src/comps/Layout.tsx new file mode 100644 index 00000000..01b094db --- /dev/null +++ b/example/react-router-ts/src/comps/Layout.tsx @@ -0,0 +1,20 @@ +import { FC, PropsWithChildren } from 'react'; +import { Outlet, ScrollRestoration, NavLink } from 'react-router-dom'; + +export const Component: FC = () => { + return ( +
+
+

KKT

+ +
+
+ +
+ +
+ ); +}; diff --git a/example/react-router-ts/src/index.css b/example/react-router-ts/src/index.css new file mode 100644 index 00000000..ec2585e8 --- /dev/null +++ b/example/react-router-ts/src/index.css @@ -0,0 +1,13 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} diff --git a/example/react-router-ts/src/index.tsx b/example/react-router-ts/src/index.tsx new file mode 100644 index 00000000..c97de37a --- /dev/null +++ b/example/react-router-ts/src/index.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import { RouterProvider, createHashRouter } from 'react-router-dom'; +import { Fallback } from './comps/Fallback'; +import reportWebVitals from './reportWebVitals'; +import { routes } from './router.data'; +import './index.css'; + +const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement); + +root.render(} />); + +// If you want to start measuring performance in your app, pass a function +// to log results (for example: reportWebVitals(console.log)) +// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals +reportWebVitals(); diff --git a/example/react-router-ts/src/logo.svg b/example/react-router-ts/src/logo.svg new file mode 100644 index 00000000..9dfc1c05 --- /dev/null +++ b/example/react-router-ts/src/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/example/react-router-ts/src/pages/about/index.tsx b/example/react-router-ts/src/pages/about/index.tsx new file mode 100644 index 00000000..9db3336d --- /dev/null +++ b/example/react-router-ts/src/pages/about/index.tsx @@ -0,0 +1,5 @@ +import { FC, PropsWithChildren } from 'react'; + +export const Component: FC = () => { + return
About Page
; +}; diff --git a/example/react-router-ts/src/pages/home/index.tsx b/example/react-router-ts/src/pages/home/index.tsx new file mode 100644 index 00000000..8cd92472 --- /dev/null +++ b/example/react-router-ts/src/pages/home/index.tsx @@ -0,0 +1,5 @@ +import { FC, PropsWithChildren } from 'react'; + +export const Component: FC = () => { + return
Home Page
; +}; diff --git a/example/react-router-ts/src/react-app-env.d.ts b/example/react-router-ts/src/react-app-env.d.ts new file mode 100644 index 00000000..6431bc5f --- /dev/null +++ b/example/react-router-ts/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/example/react-router-ts/src/reportWebVitals.ts b/example/react-router-ts/src/reportWebVitals.ts new file mode 100644 index 00000000..49a2a16e --- /dev/null +++ b/example/react-router-ts/src/reportWebVitals.ts @@ -0,0 +1,15 @@ +import { ReportHandler } from 'web-vitals'; + +const reportWebVitals = (onPerfEntry?: ReportHandler) => { + if (onPerfEntry && onPerfEntry instanceof Function) { + import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { + getCLS(onPerfEntry); + getFID(onPerfEntry); + getFCP(onPerfEntry); + getLCP(onPerfEntry); + getTTFB(onPerfEntry); + }); + } +}; + +export default reportWebVitals; diff --git a/example/react-router-ts/src/router.data.tsx b/example/react-router-ts/src/router.data.tsx new file mode 100644 index 00000000..9b8ef552 --- /dev/null +++ b/example/react-router-ts/src/router.data.tsx @@ -0,0 +1,18 @@ +import { RouteObject } from 'react-router-dom'; +import { ErrorPage } from './comps/ErrorPage'; + +export const routes: RouteObject = { + path: '/', + lazy: () => import('./comps/Layout'), + ErrorBoundary: ErrorPage, + children: [ + { + path: '/', + lazy: () => import('./pages/home'), + }, + { + path: '/about', + lazy: () => import('./pages/about'), + }, + ], +}; diff --git a/example/react-router-ts/src/setupTests.ts b/example/react-router-ts/src/setupTests.ts new file mode 100644 index 00000000..8f2609b7 --- /dev/null +++ b/example/react-router-ts/src/setupTests.ts @@ -0,0 +1,5 @@ +// jest-dom adds custom jest matchers for asserting on DOM nodes. +// allows you to do things like: +// expect(element).toHaveTextContent(/react/i) +// learn more: https://github.com/testing-library/jest-dom +import '@testing-library/jest-dom'; diff --git a/example/react-router-ts/tsconfig.json b/example/react-router-ts/tsconfig.json new file mode 100644 index 00000000..9d379a3c --- /dev/null +++ b/example/react-router-ts/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noFallthroughCasesInSwitch": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx" + }, + "include": ["src"] +} diff --git a/example/react-router/package.json b/example/react-router/package.json index 810c86cd..1c61b2da 100644 --- a/example/react-router/package.json +++ b/example/react-router/package.json @@ -17,7 +17,7 @@ "axios": "~0.27.0", "react": "~18.2.0", "react-dom": "~18.2.0", - "react-router-dom": "~6.16.0" + "react-router-dom": "^6.16.0" }, "devDependencies": { "@kkt/less-modules": "^7.5.3", diff --git a/example/rematch-tsx/package.json b/example/rematch-tsx/package.json index 85469f6a..58e20001 100644 --- a/example/rematch-tsx/package.json +++ b/example/rematch-tsx/package.json @@ -21,15 +21,15 @@ "react-dom": "~18.2.0", "react-dynamic-loadable": "~3.0.0", "react-redux": "~7.2.8", - "react-router-dom": "~6.16.0", + "react-router-dom": "^6.16.0", "uiw": "^4.21.18" }, "devDependencies": { "@kkt/less-modules": "^7.5.3", "@kkt/raw-modules": "^7.5.3", "@kkt/scope-plugin-options": "^7.5.3", - "@types/react": "~18.2.0", - "@types/react-dom": "~18.2.0", + "@types/react": "^18.2.28", + "@types/react-dom": "^18.2.13", "@types/react-redux": "~7.1.23", "kkt": "^7.5.3" }, diff --git a/example/typescript/package.json b/example/typescript/package.json index c973ced4..c2f7ae64 100644 --- a/example/typescript/package.json +++ b/example/typescript/package.json @@ -18,13 +18,13 @@ "dependencies": { "react": "~18.2.0", "react-dom": "~18.2.0", - "web-vitals": "^2.1.2" + "web-vitals": "^2.1.4" }, "devDependencies": { "@kkt/less-modules": "^7.5.3", - "@types/jest": "~27.4.1", - "@types/react": "~18.2.0", - "@types/react-dom": "~18.2.0", + "@types/jest": "^27.5.2", + "@types/react": "^18.2.28", + "@types/react-dom": "^18.2.13", "kkt": "^7.5.3" }, "eslintConfig": { diff --git a/package.json b/package.json index 3c862ba5..feb592d9 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,7 @@ "@babel/runtime": "^7.18.3", "husky": "~8.0.0", "lerna": "~7.3.0", - "lint-staged": "~14.0.0", + "lint-staged": "^15.0.0", "prettier": "~3.0.0", "tsbb": "^4.1.5" }