├── .gitignore ├── coders-app1 ├── .eslintrc ├── .prettierignore ├── babel.config.json ├── jest.config.js ├── package.json ├── src │ ├── coders-app1.tsx │ ├── declarations.d.ts │ ├── root.component.test.tsx │ └── root.component.tsx ├── tsconfig.json ├── webpack.config.js └── yarn.lock ├── coders-app2 ├── .eslintrc ├── .prettierignore ├── babel.config.json ├── jest.config.js ├── package.json ├── src │ ├── coders-app2.tsx │ ├── declarations.d.ts │ ├── root.component.test.tsx │ └── root.component.tsx ├── tsconfig.json ├── webpack.config.js └── yarn.lock ├── coders-header ├── .eslintrc ├── .prettierignore ├── babel.config.json ├── jest.config.js ├── package.json ├── src │ ├── coders-header.tsx │ ├── declarations.d.ts │ ├── root.component.test.tsx │ └── root.component.tsx ├── tsconfig.json ├── webpack.config.js └── yarn.lock ├── coders-loading ├── .eslintrc ├── .prettierignore ├── babel.config.json ├── jest.config.js ├── package.json ├── src │ ├── coders-loading.tsx │ ├── declarations.d.ts │ ├── root.component.test.tsx │ └── root.component.tsx ├── tsconfig.json ├── webpack.config.js └── yarn.lock ├── coders-root-config ├── .eslintrc ├── .gitignore ├── .prettierignore ├── babel.config.json ├── package-lock.json ├── package.json ├── public │ └── template │ │ ├── base-layout.html │ │ └── other-layout.html ├── src │ ├── coders-root-config.ts │ ├── declarations.d.ts │ ├── index.ejs │ └── microfrontend-layout.html ├── tsconfig.json ├── webpack.config.js └── yarn.lock └── coders-utility ├── .eslintrc ├── .gitignore ├── .prettierignore ├── babel.config.json ├── jest.config.js ├── package.json ├── src ├── coders-utility.ts └── declarations.d.ts ├── tsconfig.json ├── webpack.config.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | **/node_modules 2 | **/.vscode 3 | **/.env 4 | -------------------------------------------------------------------------------- /coders-app1/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "ts-react-important-stuff", 4 | "plugin:prettier/recommended" 5 | ], 6 | "parser": "@babel/eslint-parser" 7 | } 8 | -------------------------------------------------------------------------------- /coders-app1/.prettierignore: -------------------------------------------------------------------------------- 1 | .gitignore 2 | .prettierignore 3 | yarn.lock 4 | yarn-error.log 5 | package-lock.json 6 | dist 7 | coverage 8 | pnpm-lock.yaml -------------------------------------------------------------------------------- /coders-app1/babel.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | [ 5 | "@babel/preset-react", 6 | { 7 | "runtime": "automatic" 8 | } 9 | ], 10 | "@babel/preset-typescript" 11 | ], 12 | "plugins": [ 13 | [ 14 | "@babel/plugin-transform-runtime", 15 | { 16 | "useESModules": true, 17 | "regenerator": false 18 | } 19 | ] 20 | ], 21 | "env": { 22 | "test": { 23 | "presets": [ 24 | ["@babel/preset-env", { 25 | "targets": "current node" 26 | }] 27 | ] 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /coders-app1/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rootDir: "src", 3 | testEnvironment: "jsdom", 4 | transform: { 5 | "^.+\\.(j|t)sx?$": "babel-jest", 6 | }, 7 | moduleNameMapper: { 8 | "\\.(css)$": "identity-obj-proxy", 9 | "single-spa-react/parcel": "single-spa-react/lib/cjs/parcel.cjs", 10 | }, 11 | setupFilesAfterEnv: ["@testing-library/jest-dom"], 12 | }; 13 | -------------------------------------------------------------------------------- /coders-app1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@coders/app1", 3 | "scripts": { 4 | "start": "webpack serve", 5 | "start:standalone": "webpack serve --env standalone", 6 | "build": "concurrently yarn:build:*", 7 | "build:webpack": "webpack --mode=production", 8 | "analyze": "webpack --mode=production --env analyze", 9 | "lint": "eslint src --ext js,ts,tsx", 10 | "format": "prettier --write .", 11 | "check-format": "prettier --check .", 12 | "test": "cross-env BABEL_ENV=test jest", 13 | "watch-tests": "cross-env BABEL_ENV=test jest --watch", 14 | "coverage": "cross-env BABEL_ENV=test jest --coverage", 15 | "build:types": "tsc" 16 | }, 17 | "devDependencies": { 18 | "@babel/core": "^7.15.0", 19 | "@babel/eslint-parser": "^7.15.0", 20 | "@babel/plugin-transform-runtime": "^7.15.0", 21 | "@babel/preset-env": "^7.15.0", 22 | "@babel/preset-react": "^7.14.5", 23 | "@babel/runtime": "^7.15.3", 24 | "@testing-library/jest-dom": "^5.14.1", 25 | "@testing-library/react": "^12.0.0", 26 | "babel-jest": "^27.0.6", 27 | "concurrently": "^6.2.1", 28 | "cross-env": "^7.0.3", 29 | "eslint": "^7.32.0", 30 | "eslint-config-prettier": "^8.3.0", 31 | "eslint-plugin-prettier": "^3.4.1", 32 | "identity-obj-proxy": "^3.0.0", 33 | "jest": "^27.0.6", 34 | "jest-cli": "^27.0.6", 35 | "prettier": "^2.3.2", 36 | "pretty-quick": "^3.1.1", 37 | "webpack": "^5.51.1", 38 | "webpack-cli": "^4.8.0", 39 | "webpack-config-single-spa-react": "^4.0.0", 40 | "webpack-dev-server": "^4.0.0", 41 | "webpack-merge": "^5.8.0", 42 | "@babel/preset-typescript": "^7.15.0", 43 | "typescript": "^4.3.5", 44 | "webpack-config-single-spa-ts": "^4.0.0", 45 | "ts-config-single-spa": "^3.0.0", 46 | "@types/testing-library__jest-dom": "^5.14.1", 47 | "eslint-config-ts-react-important-stuff": "^3.0.0", 48 | "webpack-config-single-spa-react-ts": "^4.0.0" 49 | }, 50 | "dependencies": { 51 | "react": "^17.0.2", 52 | "react-dom": "^17.0.2", 53 | "single-spa-react": "^4.3.1", 54 | "@types/jest": "^27.0.1", 55 | "@types/systemjs": "^6.1.1", 56 | "@types/webpack-env": "^1.16.2", 57 | "single-spa": "^5.9.3", 58 | "@types/react": "^17.0.19", 59 | "@types/react-dom": "^17.0.9" 60 | }, 61 | "types": "dist/coders-app1.d.ts" 62 | } 63 | -------------------------------------------------------------------------------- /coders-app1/src/coders-app1.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import singleSpaReact from "single-spa-react"; 4 | import Root from "./root.component"; 5 | 6 | const lifecycles = singleSpaReact({ 7 | React, 8 | ReactDOM, 9 | rootComponent: Root, 10 | errorBoundary(err, info, props) { 11 | // Customize the root error boundary for your microfrontend here. 12 | return null; 13 | }, 14 | }); 15 | 16 | export const { bootstrap, mount, unmount } = lifecycles; 17 | -------------------------------------------------------------------------------- /coders-app1/src/declarations.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.html" { 2 | const rawHtmlFile: string; 3 | export = rawHtmlFile; 4 | } 5 | 6 | declare module "*.bmp" { 7 | const src: string; 8 | export default src; 9 | } 10 | 11 | declare module "*.gif" { 12 | const src: string; 13 | export default src; 14 | } 15 | 16 | declare module "*.jpg" { 17 | const src: string; 18 | export default src; 19 | } 20 | 21 | declare module "*.jpeg" { 22 | const src: string; 23 | export default src; 24 | } 25 | 26 | declare module "*.png" { 27 | const src: string; 28 | export default src; 29 | } 30 | 31 | declare module "*.webp" { 32 | const src: string; 33 | export default src; 34 | } 35 | 36 | declare module "*.svg" { 37 | const src: string; 38 | export default src; 39 | } 40 | -------------------------------------------------------------------------------- /coders-app1/src/root.component.test.tsx: -------------------------------------------------------------------------------- 1 | import { render } from "@testing-library/react"; 2 | import Root from "./root.component"; 3 | 4 | describe("Root component", () => { 5 | it("should be in the document", () => { 6 | const { getByText } = render(); 7 | expect(getByText(/Testapp is mounted!/i)).toBeInTheDocument(); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /coders-app1/src/root.component.tsx: -------------------------------------------------------------------------------- 1 | import Parcel from "single-spa-react/parcel"; 2 | import { navigateToUrl } from "single-spa"; 3 | 4 | export default function Root(props) { 5 | return ( 6 |
7 |

App1

8 | 9 | 12 | System.import("@coders/loading")} parent="App1" /> 13 |
14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /coders-app1/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "ts-config-single-spa", 3 | "compilerOptions": { 4 | "jsx": "react-jsx", 5 | "declarationDir": "dist" 6 | }, 7 | "files": ["src/coders-app1.tsx"], 8 | "include": ["src/**/*"], 9 | "exclude": ["src/**/*.test*"] 10 | } 11 | -------------------------------------------------------------------------------- /coders-app1/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { merge } = require("webpack-merge"); 2 | const singleSpaDefaults = require("webpack-config-single-spa-react-ts"); 3 | 4 | module.exports = (webpackConfigEnv, argv) => { 5 | const defaultConfig = singleSpaDefaults({ 6 | orgName: "coders", 7 | projectName: "app1", 8 | webpackConfigEnv, 9 | argv, 10 | }); 11 | 12 | return merge(defaultConfig, { 13 | devServer: { 14 | port: 8100, 15 | }, 16 | // modify the webpack config however you'd like to by adding to this object 17 | }); 18 | }; 19 | -------------------------------------------------------------------------------- /coders-app2/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "ts-react-important-stuff", 4 | "plugin:prettier/recommended" 5 | ], 6 | "parser": "@babel/eslint-parser" 7 | } 8 | -------------------------------------------------------------------------------- /coders-app2/.prettierignore: -------------------------------------------------------------------------------- 1 | .gitignore 2 | .prettierignore 3 | yarn.lock 4 | yarn-error.log 5 | package-lock.json 6 | dist 7 | coverage 8 | pnpm-lock.yaml -------------------------------------------------------------------------------- /coders-app2/babel.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | [ 5 | "@babel/preset-react", 6 | { 7 | "runtime": "automatic" 8 | } 9 | ], 10 | "@babel/preset-typescript" 11 | ], 12 | "plugins": [ 13 | [ 14 | "@babel/plugin-transform-runtime", 15 | { 16 | "useESModules": true, 17 | "regenerator": false 18 | } 19 | ] 20 | ], 21 | "env": { 22 | "test": { 23 | "presets": [ 24 | ["@babel/preset-env", { 25 | "targets": "current node" 26 | }] 27 | ] 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /coders-app2/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rootDir: "src", 3 | testEnvironment: "jsdom", 4 | transform: { 5 | "^.+\\.(j|t)sx?$": "babel-jest", 6 | }, 7 | moduleNameMapper: { 8 | "\\.(css)$": "identity-obj-proxy", 9 | "single-spa-react/parcel": "single-spa-react/lib/cjs/parcel.cjs", 10 | }, 11 | setupFilesAfterEnv: ["@testing-library/jest-dom"], 12 | }; 13 | -------------------------------------------------------------------------------- /coders-app2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@coders/app2", 3 | "scripts": { 4 | "start": "webpack serve", 5 | "start:standalone": "webpack serve --env standalone", 6 | "build": "concurrently yarn:build:*", 7 | "build:webpack": "webpack --mode=production", 8 | "analyze": "webpack --mode=production --env analyze", 9 | "lint": "eslint src --ext js,ts,tsx", 10 | "format": "prettier --write .", 11 | "check-format": "prettier --check .", 12 | "test": "cross-env BABEL_ENV=test jest", 13 | "watch-tests": "cross-env BABEL_ENV=test jest --watch", 14 | "coverage": "cross-env BABEL_ENV=test jest --coverage", 15 | "build:types": "tsc" 16 | }, 17 | "devDependencies": { 18 | "@babel/core": "^7.15.0", 19 | "@babel/eslint-parser": "^7.15.0", 20 | "@babel/plugin-transform-runtime": "^7.15.0", 21 | "@babel/preset-env": "^7.15.0", 22 | "@babel/preset-react": "^7.14.5", 23 | "@babel/runtime": "^7.15.3", 24 | "@testing-library/jest-dom": "^5.14.1", 25 | "@testing-library/react": "^12.0.0", 26 | "babel-jest": "^27.0.6", 27 | "concurrently": "^6.2.1", 28 | "cross-env": "^7.0.3", 29 | "eslint": "^7.32.0", 30 | "eslint-config-prettier": "^8.3.0", 31 | "eslint-plugin-prettier": "^3.4.1", 32 | "identity-obj-proxy": "^3.0.0", 33 | "jest": "^27.0.6", 34 | "jest-cli": "^27.0.6", 35 | "prettier": "^2.3.2", 36 | "pretty-quick": "^3.1.1", 37 | "webpack": "^5.51.1", 38 | "webpack-cli": "^4.8.0", 39 | "webpack-config-single-spa-react": "^4.0.0", 40 | "webpack-dev-server": "^4.0.0", 41 | "webpack-merge": "^5.8.0", 42 | "@babel/preset-typescript": "^7.15.0", 43 | "typescript": "^4.3.5", 44 | "webpack-config-single-spa-ts": "^4.0.0", 45 | "ts-config-single-spa": "^3.0.0", 46 | "@types/testing-library__jest-dom": "^5.14.1", 47 | "eslint-config-ts-react-important-stuff": "^3.0.0", 48 | "webpack-config-single-spa-react-ts": "^4.0.0" 49 | }, 50 | "dependencies": { 51 | "react": "^17.0.2", 52 | "react-dom": "^17.0.2", 53 | "single-spa-react": "^4.3.1", 54 | "@types/jest": "^27.0.1", 55 | "@types/systemjs": "^6.1.1", 56 | "@types/webpack-env": "^1.16.2", 57 | "single-spa": "^5.9.3", 58 | "@types/react": "^17.0.19", 59 | "@types/react-dom": "^17.0.9" 60 | }, 61 | "types": "dist/coders-app2.d.ts" 62 | } 63 | -------------------------------------------------------------------------------- /coders-app2/src/coders-app2.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import singleSpaReact from "single-spa-react"; 4 | import Root from "./root.component"; 5 | 6 | const lifecycles = singleSpaReact({ 7 | React, 8 | ReactDOM, 9 | rootComponent: Root, 10 | errorBoundary(err, info, props) { 11 | // Customize the root error boundary for your microfrontend here. 12 | return null; 13 | }, 14 | }); 15 | 16 | export const { bootstrap, mount, unmount } = lifecycles; 17 | -------------------------------------------------------------------------------- /coders-app2/src/declarations.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.html" { 2 | const rawHtmlFile: string; 3 | export = rawHtmlFile; 4 | } 5 | 6 | declare module "*.bmp" { 7 | const src: string; 8 | export default src; 9 | } 10 | 11 | declare module "*.gif" { 12 | const src: string; 13 | export default src; 14 | } 15 | 16 | declare module "*.jpg" { 17 | const src: string; 18 | export default src; 19 | } 20 | 21 | declare module "*.jpeg" { 22 | const src: string; 23 | export default src; 24 | } 25 | 26 | declare module "*.png" { 27 | const src: string; 28 | export default src; 29 | } 30 | 31 | declare module "*.webp" { 32 | const src: string; 33 | export default src; 34 | } 35 | 36 | declare module "*.svg" { 37 | const src: string; 38 | export default src; 39 | } 40 | 41 | declare module "@coders/utility"; 42 | -------------------------------------------------------------------------------- /coders-app2/src/root.component.test.tsx: -------------------------------------------------------------------------------- 1 | import { render } from "@testing-library/react"; 2 | import Root from "./root.component"; 3 | 4 | describe("Root component", () => { 5 | it("should be in the document", () => { 6 | const { getByText } = render(); 7 | expect(getByText(/Testapp is mounted!/i)).toBeInTheDocument(); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /coders-app2/src/root.component.tsx: -------------------------------------------------------------------------------- 1 | // @ts-ignore 2 | import { useStore } from "@coders/utility"; 3 | 4 | import Parcel from "single-spa-react/parcel"; 5 | import { navigateToUrl } from "single-spa"; 6 | 7 | export default function Root(props) { 8 | const state = useStore(); 9 | return ( 10 |
11 |

APP2

12 |

Eu peguei o state sem o Parcel: {JSON.stringify(state.loading)}

13 | 14 | 17 | 18 | System.import("@coders/loading")} parent="App2" /> 19 |
20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /coders-app2/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "ts-config-single-spa", 3 | "compilerOptions": { 4 | "jsx": "react-jsx", 5 | "declarationDir": "dist" 6 | }, 7 | "files": ["src/coders-app2.tsx"], 8 | "include": ["src/**/*"], 9 | "exclude": ["src/**/*.test*"] 10 | } 11 | -------------------------------------------------------------------------------- /coders-app2/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { merge } = require("webpack-merge"); 2 | const singleSpaDefaults = require("webpack-config-single-spa-react-ts"); 3 | 4 | module.exports = (webpackConfigEnv, argv) => { 5 | const defaultConfig = singleSpaDefaults({ 6 | orgName: "coders", 7 | projectName: "app2", 8 | webpackConfigEnv, 9 | argv, 10 | }); 11 | 12 | return merge(defaultConfig, { 13 | devServer: { 14 | port: 8200, 15 | }, 16 | externals: ["zustand", "zustand/middleware"], 17 | // modify the webpack config however you'd like to by adding to this object 18 | }); 19 | }; 20 | -------------------------------------------------------------------------------- /coders-header/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "ts-react-important-stuff", 4 | "plugin:prettier/recommended" 5 | ], 6 | "parser": "@babel/eslint-parser" 7 | } 8 | -------------------------------------------------------------------------------- /coders-header/.prettierignore: -------------------------------------------------------------------------------- 1 | .gitignore 2 | .prettierignore 3 | yarn.lock 4 | yarn-error.log 5 | package-lock.json 6 | dist 7 | coverage 8 | pnpm-lock.yaml -------------------------------------------------------------------------------- /coders-header/babel.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | [ 5 | "@babel/preset-react", 6 | { 7 | "runtime": "automatic" 8 | } 9 | ], 10 | "@babel/preset-typescript" 11 | ], 12 | "plugins": [ 13 | [ 14 | "@babel/plugin-transform-runtime", 15 | { 16 | "useESModules": true, 17 | "regenerator": false 18 | } 19 | ] 20 | ], 21 | "env": { 22 | "test": { 23 | "presets": [ 24 | ["@babel/preset-env", { 25 | "targets": "current node" 26 | }] 27 | ] 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /coders-header/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rootDir: "src", 3 | testEnvironment: "jsdom", 4 | transform: { 5 | "^.+\\.(j|t)sx?$": "babel-jest", 6 | }, 7 | moduleNameMapper: { 8 | "\\.(css)$": "identity-obj-proxy", 9 | "single-spa-react/parcel": "single-spa-react/lib/cjs/parcel.cjs", 10 | }, 11 | setupFilesAfterEnv: ["@testing-library/jest-dom"], 12 | }; 13 | -------------------------------------------------------------------------------- /coders-header/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@coders/header", 3 | "scripts": { 4 | "start": "webpack serve", 5 | "start:standalone": "webpack serve --env standalone", 6 | "build": "concurrently yarn:build:*", 7 | "build:webpack": "webpack --mode=production", 8 | "analyze": "webpack --mode=production --env analyze", 9 | "lint": "eslint src --ext js,ts,tsx", 10 | "format": "prettier --write .", 11 | "check-format": "prettier --check .", 12 | "test": "cross-env BABEL_ENV=test jest", 13 | "watch-tests": "cross-env BABEL_ENV=test jest --watch", 14 | "coverage": "cross-env BABEL_ENV=test jest --coverage", 15 | "build:types": "tsc" 16 | }, 17 | "devDependencies": { 18 | "@babel/core": "^7.15.0", 19 | "@babel/eslint-parser": "^7.15.0", 20 | "@babel/plugin-transform-runtime": "^7.15.0", 21 | "@babel/preset-env": "^7.15.0", 22 | "@babel/preset-react": "^7.14.5", 23 | "@babel/runtime": "^7.15.3", 24 | "@testing-library/jest-dom": "^5.14.1", 25 | "@testing-library/react": "^12.0.0", 26 | "babel-jest": "^27.0.6", 27 | "concurrently": "^6.2.1", 28 | "cross-env": "^7.0.3", 29 | "eslint": "^7.32.0", 30 | "eslint-config-prettier": "^8.3.0", 31 | "eslint-plugin-prettier": "^3.4.1", 32 | "identity-obj-proxy": "^3.0.0", 33 | "jest": "^27.0.6", 34 | "jest-cli": "^27.0.6", 35 | "prettier": "^2.3.2", 36 | "pretty-quick": "^3.1.1", 37 | "webpack": "^5.51.1", 38 | "webpack-cli": "^4.8.0", 39 | "webpack-config-single-spa-react": "^4.0.0", 40 | "webpack-dev-server": "^4.0.0", 41 | "webpack-merge": "^5.8.0", 42 | "@babel/preset-typescript": "^7.15.0", 43 | "typescript": "^4.3.5", 44 | "webpack-config-single-spa-ts": "^4.0.0", 45 | "ts-config-single-spa": "^3.0.0", 46 | "@types/testing-library__jest-dom": "^5.14.1", 47 | "eslint-config-ts-react-important-stuff": "^3.0.0", 48 | "webpack-config-single-spa-react-ts": "^4.0.0" 49 | }, 50 | "dependencies": { 51 | "react": "^17.0.2", 52 | "react-dom": "^17.0.2", 53 | "single-spa-react": "^4.3.1", 54 | "@types/jest": "^27.0.1", 55 | "@types/systemjs": "^6.1.1", 56 | "@types/webpack-env": "^1.16.2", 57 | "single-spa": "^5.9.3", 58 | "@types/react": "^17.0.19", 59 | "@types/react-dom": "^17.0.9" 60 | }, 61 | "types": "dist/coders-header.d.ts" 62 | } 63 | -------------------------------------------------------------------------------- /coders-header/src/coders-header.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import singleSpaReact from "single-spa-react"; 4 | import Root from "./root.component"; 5 | 6 | const lifecycles = singleSpaReact({ 7 | React, 8 | ReactDOM, 9 | rootComponent: Root, 10 | errorBoundary(err, info, props) { 11 | // Customize the root error boundary for your microfrontend here. 12 | return null; 13 | }, 14 | }); 15 | 16 | export const { bootstrap, mount, unmount } = lifecycles; 17 | -------------------------------------------------------------------------------- /coders-header/src/declarations.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.html" { 2 | const rawHtmlFile: string; 3 | export = rawHtmlFile; 4 | } 5 | 6 | declare module "*.bmp" { 7 | const src: string; 8 | export default src; 9 | } 10 | 11 | declare module "*.gif" { 12 | const src: string; 13 | export default src; 14 | } 15 | 16 | declare module "*.jpg" { 17 | const src: string; 18 | export default src; 19 | } 20 | 21 | declare module "*.jpeg" { 22 | const src: string; 23 | export default src; 24 | } 25 | 26 | declare module "*.png" { 27 | const src: string; 28 | export default src; 29 | } 30 | 31 | declare module "*.webp" { 32 | const src: string; 33 | export default src; 34 | } 35 | 36 | declare module "*.svg" { 37 | const src: string; 38 | export default src; 39 | } 40 | -------------------------------------------------------------------------------- /coders-header/src/root.component.test.tsx: -------------------------------------------------------------------------------- 1 | import { render } from "@testing-library/react"; 2 | import Root from "./root.component"; 3 | 4 | describe("Root component", () => { 5 | it("should be in the document", () => { 6 | const { getByText } = render(); 7 | expect(getByText(/Testapp is mounted!/i)).toBeInTheDocument(); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /coders-header/src/root.component.tsx: -------------------------------------------------------------------------------- 1 | import { navigateToUrl } from "single-spa"; 2 | export default function Root(props) { 3 | return ( 4 |
5 |

HEADER

6 | 7 | 8 | 9 |
10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /coders-header/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "ts-config-single-spa", 3 | "compilerOptions": { 4 | "jsx": "react-jsx", 5 | "declarationDir": "dist" 6 | }, 7 | "files": ["src/coders-header.tsx"], 8 | "include": ["src/**/*"], 9 | "exclude": ["src/**/*.test*"] 10 | } 11 | -------------------------------------------------------------------------------- /coders-header/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { merge } = require("webpack-merge"); 2 | const singleSpaDefaults = require("webpack-config-single-spa-react-ts"); 3 | 4 | module.exports = (webpackConfigEnv, argv) => { 5 | const defaultConfig = singleSpaDefaults({ 6 | orgName: "coders", 7 | projectName: "header", 8 | webpackConfigEnv, 9 | argv, 10 | }); 11 | 12 | return merge(defaultConfig, { 13 | devServer: { 14 | port: 8000, 15 | }, 16 | // modify the webpack config however you'd like to by adding to this object 17 | }); 18 | }; 19 | -------------------------------------------------------------------------------- /coders-loading/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "ts-react-important-stuff", 4 | "plugin:prettier/recommended" 5 | ], 6 | "parser": "@babel/eslint-parser" 7 | } 8 | -------------------------------------------------------------------------------- /coders-loading/.prettierignore: -------------------------------------------------------------------------------- 1 | .gitignore 2 | .prettierignore 3 | yarn.lock 4 | yarn-error.log 5 | package-lock.json 6 | dist 7 | coverage 8 | pnpm-lock.yaml -------------------------------------------------------------------------------- /coders-loading/babel.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | [ 5 | "@babel/preset-react", 6 | { 7 | "runtime": "automatic" 8 | } 9 | ], 10 | "@babel/preset-typescript" 11 | ], 12 | "plugins": [ 13 | [ 14 | "@babel/plugin-transform-runtime", 15 | { 16 | "useESModules": true, 17 | "regenerator": false 18 | } 19 | ] 20 | ], 21 | "env": { 22 | "test": { 23 | "presets": [ 24 | ["@babel/preset-env", { 25 | "targets": "current node" 26 | }] 27 | ] 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /coders-loading/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rootDir: "src", 3 | testEnvironment: "jsdom", 4 | transform: { 5 | "^.+\\.(j|t)sx?$": "babel-jest", 6 | }, 7 | moduleNameMapper: { 8 | "\\.(css)$": "identity-obj-proxy", 9 | "single-spa-react/parcel": "single-spa-react/lib/cjs/parcel.cjs", 10 | }, 11 | setupFilesAfterEnv: ["@testing-library/jest-dom"], 12 | }; 13 | -------------------------------------------------------------------------------- /coders-loading/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@coders/loading", 3 | "scripts": { 4 | "start": "webpack serve", 5 | "start:standalone": "webpack serve --env standalone", 6 | "build": "concurrently yarn:build:*", 7 | "build:webpack": "webpack --mode=production", 8 | "analyze": "webpack --mode=production --env analyze", 9 | "lint": "eslint src --ext js,ts,tsx", 10 | "format": "prettier --write .", 11 | "check-format": "prettier --check .", 12 | "test": "cross-env BABEL_ENV=test jest", 13 | "watch-tests": "cross-env BABEL_ENV=test jest --watch", 14 | "coverage": "cross-env BABEL_ENV=test jest --coverage", 15 | "build:types": "tsc" 16 | }, 17 | "devDependencies": { 18 | "@babel/core": "^7.15.0", 19 | "@babel/eslint-parser": "^7.15.0", 20 | "@babel/plugin-transform-runtime": "^7.15.0", 21 | "@babel/preset-env": "^7.15.0", 22 | "@babel/preset-react": "^7.14.5", 23 | "@babel/preset-typescript": "^7.15.0", 24 | "@babel/runtime": "^7.15.3", 25 | "@testing-library/jest-dom": "^5.14.1", 26 | "@testing-library/react": "^12.0.0", 27 | "@types/testing-library__jest-dom": "^5.14.1", 28 | "babel-jest": "^27.0.6", 29 | "concurrently": "^6.2.1", 30 | "cross-env": "^7.0.3", 31 | "eslint": "^7.32.0", 32 | "eslint-config-prettier": "^8.3.0", 33 | "eslint-config-ts-react-important-stuff": "^3.0.0", 34 | "eslint-plugin-prettier": "^3.4.1", 35 | "identity-obj-proxy": "^3.0.0", 36 | "jest": "^27.0.6", 37 | "jest-cli": "^27.0.6", 38 | "prettier": "^2.3.2", 39 | "pretty-quick": "^3.1.1", 40 | "ts-config-single-spa": "^3.0.0", 41 | "typescript": "^4.3.5", 42 | "webpack": "^5.51.1", 43 | "webpack-cli": "^4.8.0", 44 | "webpack-config-single-spa-react": "^4.0.0", 45 | "webpack-config-single-spa-react-ts": "^4.0.0", 46 | "webpack-config-single-spa-ts": "^4.0.0", 47 | "webpack-dev-server": "^4.0.0", 48 | "webpack-merge": "^5.8.0", 49 | "zustand": "^3.7.0" 50 | }, 51 | "dependencies": { 52 | "@types/jest": "^27.0.1", 53 | "@types/react": "^17.0.19", 54 | "@types/react-dom": "^17.0.9", 55 | "@types/systemjs": "^6.1.1", 56 | "@types/webpack-env": "^1.16.2", 57 | "react": "^17.0.2", 58 | "react-dom": "^17.0.2", 59 | "single-spa": "^5.9.3", 60 | "single-spa-react": "^4.3.1" 61 | }, 62 | "types": "dist/coders-loading.d.ts" 63 | } 64 | -------------------------------------------------------------------------------- /coders-loading/src/coders-loading.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import singleSpaReact from "single-spa-react"; 4 | import Root from "./root.component"; 5 | 6 | const lifecycles = singleSpaReact({ 7 | React, 8 | ReactDOM, 9 | rootComponent: Root, 10 | errorBoundary(err, info, props) { 11 | // Customize the root error boundary for your microfrontend here. 12 | return null; 13 | }, 14 | }); 15 | 16 | export const { bootstrap, mount, unmount } = lifecycles; 17 | -------------------------------------------------------------------------------- /coders-loading/src/declarations.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.html" { 2 | const rawHtmlFile: string; 3 | export = rawHtmlFile; 4 | } 5 | 6 | declare module "*.bmp" { 7 | const src: string; 8 | export default src; 9 | } 10 | 11 | declare module "*.gif" { 12 | const src: string; 13 | export default src; 14 | } 15 | 16 | declare module "*.jpg" { 17 | const src: string; 18 | export default src; 19 | } 20 | 21 | declare module "*.jpeg" { 22 | const src: string; 23 | export default src; 24 | } 25 | 26 | declare module "*.png" { 27 | const src: string; 28 | export default src; 29 | } 30 | 31 | declare module "*.webp" { 32 | const src: string; 33 | export default src; 34 | } 35 | 36 | declare module "*.svg" { 37 | const src: string; 38 | export default src; 39 | } 40 | -------------------------------------------------------------------------------- /coders-loading/src/root.component.test.tsx: -------------------------------------------------------------------------------- 1 | import { render } from "@testing-library/react"; 2 | import Root from "./root.component"; 3 | 4 | describe("Root component", () => { 5 | it("should be in the document", () => { 6 | const { getByText } = render(); 7 | expect(getByText(/Testapp is mounted!/i)).toBeInTheDocument(); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /coders-loading/src/root.component.tsx: -------------------------------------------------------------------------------- 1 | // @ts-ignore 2 | import { useStore } from "@coders/utility"; 3 | 4 | export default function Root(props) { 5 | const state = useStore(); 6 | return ( 7 |
8 |

PARCEL usado pelo mfe: {props.parent}

9 | {state?.loading ? "Parcel Loading..." : "Parcel Done"} 10 |
11 | 12 |
13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /coders-loading/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "ts-config-single-spa", 3 | "compilerOptions": { 4 | "jsx": "react-jsx", 5 | "declarationDir": "dist" 6 | }, 7 | "files": ["src/coders-loading.tsx"], 8 | "include": ["src/**/*"], 9 | "exclude": ["src/**/*.test*"] 10 | } 11 | -------------------------------------------------------------------------------- /coders-loading/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { merge } = require("webpack-merge"); 2 | const singleSpaDefaults = require("webpack-config-single-spa-react-ts"); 3 | 4 | module.exports = (webpackConfigEnv, argv) => { 5 | const defaultConfig = singleSpaDefaults({ 6 | orgName: "coders", 7 | projectName: "loading", 8 | webpackConfigEnv, 9 | argv, 10 | }); 11 | 12 | return merge(defaultConfig, { 13 | devServer: { 14 | port: 5000, 15 | }, 16 | // modify the webpack config however you'd like to by adding to this object 17 | }); 18 | }; 19 | -------------------------------------------------------------------------------- /coders-root-config/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["ts-important-stuff", "plugin:prettier/recommended"], 3 | "parser": "@babel/eslint-parser" 4 | } 5 | -------------------------------------------------------------------------------- /coders-root-config/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | dist 63 | 64 | # Editor directories and files 65 | .idea 66 | .vscode 67 | *.suo 68 | *.ntvs* 69 | *.njsproj 70 | *.sln 71 | *.sw? 72 | .DS_Store 73 | -------------------------------------------------------------------------------- /coders-root-config/.prettierignore: -------------------------------------------------------------------------------- 1 | .gitignore 2 | .prettierignore 3 | yarn.lock 4 | yarn-error.log 5 | package-lock.json 6 | LICENSE 7 | *.ejs 8 | dist 9 | coverage 10 | pnpm-lock.yaml -------------------------------------------------------------------------------- /coders-root-config/babel.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript" 5 | ], 6 | "plugins": [ 7 | [ 8 | "@babel/plugin-transform-runtime", 9 | { 10 | "useESModules": true, 11 | "regenerator": false 12 | } 13 | ] 14 | ], 15 | "env": { 16 | "test": { 17 | "presets": [ 18 | ["@babel/preset-env", { 19 | "targets": "current node" 20 | }] 21 | ] 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /coders-root-config/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@coders/root-config", 3 | "scripts": { 4 | "start": "webpack serve --port 9000 --env isLocal", 5 | "lint": "eslint src --ext js,ts,tsx", 6 | "test": "cross-env BABEL_ENV=test jest --passWithNoTests", 7 | "format": "prettier --write .", 8 | "check-format": "prettier --check .", 9 | "build": "concurrently yarn:build:*", 10 | "build:webpack": "webpack --mode=production", 11 | "build:types": "tsc" 12 | }, 13 | "devDependencies": { 14 | "@babel/core": "^7.15.0", 15 | "@babel/eslint-parser": "^7.15.0", 16 | "@babel/plugin-transform-runtime": "^7.15.0", 17 | "@babel/preset-env": "^7.15.0", 18 | "@babel/runtime": "^7.15.3", 19 | "concurrently": "^6.2.1", 20 | "cross-env": "^7.0.3", 21 | "eslint": "^7.32.0", 22 | "eslint-config-prettier": "^8.3.0", 23 | "eslint-plugin-prettier": "^3.4.1", 24 | "html-webpack-plugin": "^5.3.2", 25 | "jest": "^27.0.6", 26 | "jest-cli": "^27.0.6", 27 | "prettier": "^2.3.2", 28 | "pretty-quick": "^3.1.1", 29 | "serve": "^12.0.0", 30 | "webpack": "^5.51.1", 31 | "webpack-cli": "^4.8.0", 32 | "webpack-dev-server": "^4.0.0", 33 | "webpack-merge": "^5.8.0", 34 | "@babel/preset-typescript": "^7.15.0", 35 | "eslint-config-ts-important-stuff": "^1.1.0", 36 | "typescript": "^4.3.5", 37 | "webpack-config-single-spa-ts": "^4.0.0", 38 | "ts-config-single-spa": "^3.0.0" 39 | }, 40 | "dependencies": { 41 | "@types/jest": "^27.0.1", 42 | "@types/systemjs": "^6.1.1", 43 | "single-spa": "^5.9.3", 44 | "@types/webpack-env": "^1.16.2", 45 | "single-spa-layout": "^1.6.0" 46 | }, 47 | "types": "dist/coders-root-config.d.ts" 48 | } 49 | -------------------------------------------------------------------------------- /coders-root-config/public/template/base-layout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

BASE LAYOUT

5 | 6 | -------------------------------------------------------------------------------- /coders-root-config/public/template/other-layout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 |

OTHER LAYOUT

6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /coders-root-config/src/coders-root-config.ts: -------------------------------------------------------------------------------- 1 | import { registerApplication, start } from "single-spa"; 2 | import { 3 | constructApplications, 4 | constructRoutes, 5 | constructLayoutEngine, 6 | } from "single-spa-layout"; 7 | 8 | import microfrontendLayout from "./microfrontend-layout.html"; 9 | 10 | function getTemplate(template){ 11 | console.log("template",template); 12 | if(!template){ 13 | customStart(microfrontendLayout) 14 | } 15 | else { 16 | fetch(`/template/${template}-layout.html`).then((res) => res.text()).then((res) => { 17 | console.log(res); 18 | customStart(res) 19 | return res; 20 | }).catch((err) => { 21 | // LOAD DEFAULT TEMPLATE 22 | customStart(microfrontendLayout) 23 | console.log(err); 24 | return null; 25 | }) 26 | } 27 | 28 | } 29 | 30 | function customStart(layoutHtml){ 31 | const routes = constructRoutes(layoutHtml); 32 | const applications = constructApplications({ 33 | routes, 34 | loadApp({ name }) { 35 | return System.import(name); 36 | }, 37 | }); 38 | const layoutEngine = constructLayoutEngine({ routes, applications }); 39 | 40 | applications.forEach(registerApplication); 41 | layoutEngine.activate(); 42 | start(); 43 | } 44 | 45 | const template = localStorage.getItem('template') 46 | 47 | getTemplate(template) 48 | 49 | 50 | -------------------------------------------------------------------------------- /coders-root-config/src/declarations.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.html" { 2 | const rawHtmlFile: string; 3 | export = rawHtmlFile; 4 | } 5 | 6 | declare module "*.bmp" { 7 | const src: string; 8 | export default src; 9 | } 10 | 11 | declare module "*.gif" { 12 | const src: string; 13 | export default src; 14 | } 15 | 16 | declare module "*.jpg" { 17 | const src: string; 18 | export default src; 19 | } 20 | 21 | declare module "*.jpeg" { 22 | const src: string; 23 | export default src; 24 | } 25 | 26 | declare module "*.png" { 27 | const src: string; 28 | export default src; 29 | } 30 | 31 | declare module "*.webp" { 32 | const src: string; 33 | export default src; 34 | } 35 | 36 | declare module "*.svg" { 37 | const src: string; 38 | export default src; 39 | } 40 | -------------------------------------------------------------------------------- /coders-root-config/src/index.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Workshop Coders Club 8 | 9 | 14 | 15 | 16 | 20 | 24 | 25 | 26 | 27 | 28 | 29 | 37 | 48 | 53 | 54 | 69 | 70 | 71 | 72 | 73 | <% if (isLocal) { %> 74 | 87 | <% } %> 88 | 89 | 93 | 94 | 95 | 96 | <% if (isLocal) { %> 97 | 98 | 99 | <% } else { %> 100 | 101 | 102 | <% } %> 103 | 104 | 105 | 106 | 110 | 114 | 115 | 116 | -------------------------------------------------------------------------------- /coders-root-config/src/microfrontend-layout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | -------------------------------------------------------------------------------- /coders-root-config/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "ts-config-single-spa", 3 | "files": ["src/coders-root-config.ts"], 4 | "compilerOptions": { 5 | "declarationDir": "dist" 6 | }, 7 | "include": ["src/**/*"], 8 | "exclude": ["src/**/*.test*"] 9 | } 10 | -------------------------------------------------------------------------------- /coders-root-config/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { merge } = require("webpack-merge"); 2 | const singleSpaDefaults = require("webpack-config-single-spa-ts"); 3 | const HtmlWebpackPlugin = require("html-webpack-plugin"); 4 | 5 | module.exports = (webpackConfigEnv, argv) => { 6 | const orgName = "coders"; 7 | const defaultConfig = singleSpaDefaults({ 8 | orgName, 9 | projectName: "root-config", 10 | webpackConfigEnv, 11 | argv, 12 | disableHtmlGeneration: true, 13 | }); 14 | 15 | return merge(defaultConfig, { 16 | // modify the webpack config however you'd like to by adding to this object 17 | plugins: [ 18 | new HtmlWebpackPlugin({ 19 | inject: false, 20 | template: "src/index.ejs", 21 | templateParameters: { 22 | isLocal: webpackConfigEnv && webpackConfigEnv.isLocal, 23 | orgName, 24 | }, 25 | }), 26 | ], 27 | }); 28 | }; 29 | -------------------------------------------------------------------------------- /coders-utility/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "ts-important-stuff", 4 | "plugin:prettier/recommended" 5 | ], 6 | "parser": "@babel/eslint-parser" 7 | } 8 | -------------------------------------------------------------------------------- /coders-utility/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | dist 63 | 64 | # Editor directories and files 65 | .idea 66 | .vscode 67 | *.suo 68 | *.ntvs* 69 | *.njsproj 70 | *.sln 71 | *.sw? 72 | .DS_Store 73 | -------------------------------------------------------------------------------- /coders-utility/.prettierignore: -------------------------------------------------------------------------------- 1 | .gitignore 2 | .prettierignore 3 | yarn.lock 4 | yarn-error.log 5 | package-lock.json 6 | dist 7 | coverage 8 | pnpm-lock.yaml -------------------------------------------------------------------------------- /coders-utility/babel.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript" 5 | ], 6 | "plugins": [ 7 | [ 8 | "@babel/plugin-transform-runtime", 9 | { 10 | "useESModules": true, 11 | "regenerator": false 12 | } 13 | ] 14 | ], 15 | "env": { 16 | "test": { 17 | "presets": [ 18 | ["@babel/preset-env", { 19 | "targets": "current node" 20 | }] 21 | ] 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /coders-utility/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | testEnvironment: "jsdom", 3 | transform: { 4 | "^.+\\.(j|t)sx?$": "babel-jest", 5 | }, 6 | moduleNameMapper: { 7 | "\\.(css)$": "identity-obj-proxy", 8 | }, 9 | }; 10 | -------------------------------------------------------------------------------- /coders-utility/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@coders/utility", 3 | "scripts": { 4 | "start": "webpack serve", 5 | "start:standalone": "webpack serve --env standalone", 6 | "build": "concurrently yarn:build:*", 7 | "build:webpack": "webpack --mode=production", 8 | "analyze": "webpack --mode=production --env analyze", 9 | "lint": "eslint src --ext js,ts,tsx", 10 | "format": "prettier --write .", 11 | "check-format": "prettier --check .", 12 | "test": "cross-env BABEL_ENV=test jest --passWithNoTests", 13 | "watch-tests": "cross-env BABEL_ENV=test jest --watch", 14 | "coverage": "cross-env BABEL_ENV=test jest --coverage", 15 | "build:types": "tsc" 16 | }, 17 | "devDependencies": { 18 | "@babel/core": "^7.15.0", 19 | "@babel/eslint-parser": "^7.15.0", 20 | "@babel/plugin-transform-runtime": "^7.15.0", 21 | "@babel/preset-env": "^7.15.0", 22 | "@babel/preset-typescript": "^7.15.0", 23 | "@babel/runtime": "^7.15.3", 24 | "babel-jest": "^27.0.6", 25 | "concurrently": "^6.2.1", 26 | "cross-env": "^7.0.3", 27 | "eslint": "^7.32.0", 28 | "eslint-config-prettier": "^8.3.0", 29 | "eslint-config-ts-important-stuff": "^1.1.0", 30 | "eslint-plugin-prettier": "^3.4.1", 31 | "husky": "^7.0.2", 32 | "identity-obj-proxy": "^3.0.0", 33 | "jest": "^27.0.6", 34 | "jest-cli": "^27.0.6", 35 | "prettier": "^2.3.2", 36 | "pretty-quick": "^3.1.1", 37 | "react": "^17.0.2", 38 | "react-dom": "^17.0.2", 39 | "ts-config-single-spa": "^3.0.0", 40 | "typescript": "^4.3.5", 41 | "webpack": "^5.51.1", 42 | "webpack-cli": "^4.8.0", 43 | "webpack-config-single-spa-ts": "^4.0.0", 44 | "webpack-dev-server": "^4.0.0", 45 | "webpack-merge": "^5.8.0", 46 | "zustand": "^3.7.0" 47 | }, 48 | "dependencies": { 49 | "@types/jest": "^27.0.1", 50 | "@types/systemjs": "^6.1.1", 51 | "@types/webpack-env": "^1.16.2", 52 | "single-spa": "^5.9.3" 53 | }, 54 | "types": "dist/coders-utility.d.ts" 55 | } 56 | -------------------------------------------------------------------------------- /coders-utility/src/coders-utility.ts: -------------------------------------------------------------------------------- 1 | import create from "zustand"; 2 | import { combine } from "zustand/middleware"; 3 | 4 | type StoreProperties = { 5 | loading: boolean; 6 | }; 7 | 8 | type StoreMethods = { 9 | toggle: () => void; 10 | }; 11 | 12 | const store = combine( 13 | { 14 | loading: false, 15 | }, 16 | (set) => ({ 17 | toggle() { 18 | set((state) => { 19 | localStorage.setItem( 20 | "@coders/global", 21 | JSON.stringify({ loading: !state.loading }) 22 | ); 23 | return { 24 | loading: !state.loading, 25 | }; 26 | }); 27 | }, 28 | }) 29 | ); 30 | 31 | const useStore = create(store); 32 | 33 | export { useStore }; 34 | -------------------------------------------------------------------------------- /coders-utility/src/declarations.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.html" { 2 | const rawHtmlFile: string; 3 | export = rawHtmlFile; 4 | } 5 | 6 | declare module "*.bmp" { 7 | const src: string; 8 | export default src; 9 | } 10 | 11 | declare module "*.gif" { 12 | const src: string; 13 | export default src; 14 | } 15 | 16 | declare module "*.jpg" { 17 | const src: string; 18 | export default src; 19 | } 20 | 21 | declare module "*.jpeg" { 22 | const src: string; 23 | export default src; 24 | } 25 | 26 | declare module "*.png" { 27 | const src: string; 28 | export default src; 29 | } 30 | 31 | declare module "*.webp" { 32 | const src: string; 33 | export default src; 34 | } 35 | 36 | declare module "*.svg" { 37 | const src: string; 38 | export default src; 39 | } 40 | -------------------------------------------------------------------------------- /coders-utility/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "ts-config-single-spa", 3 | "files": ["src/coders-utility.ts"], 4 | "compilerOptions": { 5 | "declarationDir": "dist" 6 | }, 7 | "include": ["src/**/*"], 8 | "exclude": ["src/**/*.test*"] 9 | } 10 | -------------------------------------------------------------------------------- /coders-utility/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { merge } = require("webpack-merge"); 2 | const singleSpaDefaults = require("webpack-config-single-spa-ts"); 3 | 4 | module.exports = (webpackConfigEnv, argv) => { 5 | const defaultConfig = singleSpaDefaults({ 6 | orgName: "coders", 7 | projectName: "utility", 8 | webpackConfigEnv, 9 | argv, 10 | }); 11 | 12 | return merge(defaultConfig, { 13 | devServer: { 14 | port: 5100, 15 | }, 16 | externals: ["zustand", "zustand/middleware"], 17 | // modify the webpack config however you'd like to by adding to this object 18 | }); 19 | }; 20 | --------------------------------------------------------------------------------