chore: monorepo with webpack

Author: apvilkko

.eslintrc.js

@@ -0,0 +1,36 @@
+module.exports = {
+  env: {
+    es2021: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:@typescript-eslint/recommended-requiring-type-checking',
+    'plugin:prettier/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 12,
+  },
+  plugins: ['@typescript-eslint'],
+  rules: {
+    'prefer-const': 'error',
+    'no-console': 'warn',
+    '@typescript-eslint/no-unsafe-member-access': 'off',
+    '@typescript-eslint/no-unsafe-call': 'off',
+    '@typescript-eslint/no-unsafe-assignment': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      { ignoreRestSiblings: true, args: 'after-used' },
+    ],
+  },
+  overrides: [
+    {
+      files: ['**/*.test.ts'],
+      env: {
+        jest: true,
+      },
+    },
+  ],
+}

.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  semi: false,
+  trailingComma: 'all',
+  singleQuote: true,
+  printWidth: 100,
+  tabWidth: 2,
+}

README.md

@@ -1 +1 @@
-# grapql-codegen-demo
+# graphql-codegen-demo

lerna.json

@@ -0,0 +1,8 @@
+{
+  "packages": [
+    "packages/*"
+  ],
+  "version": "independent",
+  "npmClient": "yarn",
+  "useWorkspaces": true
+}

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "graphql-codegen-demo",
+  "scripts": {
+    "build:all": "lerna run build --stream",
+    "build": "yarn build:all",
+    "start:client": "lerna run start --stream --scope=\"@mydemo/client\"",
+    "start": "run-p start:client"
+  },
+  "private": true,
+  "workspaces": [
+    "packages/*"
+  ],
+  "devDependencies": {
+    "@babel/core": "^7.13.14",
+    "@babel/preset-env": "^7.13.12",
+    "@babel/preset-react": "^7.13.13",
+    "@babel/preset-typescript": "^7.13.0",
+    "babel-loader": "^8.2.2",
+    "eslint": "^7.23.0",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-prettier": "^3.3.1",
+    "lerna": "3",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.2.1",
+    "rimraf": "^3.0.2",
+    "typescript": "^4.2.3",
+    "webpack": "^5.28.0",
+    "webpack-cli": "^4.6.0"
+  }
+}

packages/.babelrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [['@babel/preset-env', { targets: { node: '10' } }], '@babel/preset-typescript'],
+}

packages/api/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@mydemo/api",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT"
+}

packages/api/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig.react.json",
+  "compilerOptions": {
+    "rootDir": "src"
+  }
+}

packages/client/babel.config.js

@@ -0,0 +1,8 @@
+module.exports = function (api) {
+  api.cache(true)
+  return {
+    extends: '../.babelrc',
+    presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
+    plugins: [],
+  }
+}

packages/client/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@mydemo/client",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "clean": "rimraf dist",
+    "build:app": "webpack --mode production",
+    "build": "run-s clean build:app",
+    "start": "webpack serve --mode development"
+  },
+  "dependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.3",
+    "css-loader": "^5.2.0",
+    "html-webpack-plugin": "^5.3.1",
+    "style-loader": "^2.0.0",
+    "webpack-dev-server": "^3.11.2"
+  }
+}

packages/client/src/App.tsx

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export const App = () => {
+  return <div>hello</div>
+}

packages/client/src/index.ts

@@ -0,0 +1,11 @@
+import React from 'react'
+import { render } from 'react-dom'
+import { App } from './App'
+
+let el = document.getElementById('app')
+if (!el) {
+  el = document.createElement('div')
+  el.id = 'app'
+  document.body.appendChild(el)
+}
+render(React.createElement(App), el)

packages/client/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig.react.json",
+  "compilerOptions": {
+    "rootDir": "src"
+  }
+}

packages/client/webpack.config.js

@@ -0,0 +1,23 @@
+const path = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  entry: path.resolve(__dirname, './src/index.ts'),
+  output: {
+    path: path.resolve(__dirname, './dist'),
+    filename: 'index.js',
+  },
+  resolve: {
+    extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
+  },
+  module: {
+    rules: [
+      { test: /\.(t|j)sx?$/, use: ['babel-loader'], exclude: /node_modules/ },
+      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
+    ],
+  },
+  plugins: [new HtmlWebpackPlugin({ title: 'graphql-codegen demo' })],
+  devServer: {
+    port: 4001,
+  },
+}

packages/server/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@mydemo/server",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT"
+}

packages/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "files": [],
+  "references": [{ "path": "./client" }, { "path": "./server" }, { "path": "./api" }]
+}

packages/tsconfig.react.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.settings.json",
+  "compilerOptions": {
+    "composite": true,
+    "outDir": "dist",
+    "jsx": "react"
+  },
+  "references": [{ "path": "./api" }]
+}

packages/tsconfig.settings.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../tsconfig.json"
+}

tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "module": "CommonJS",
+    "composite": true,
+    "target": "ES2018",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "declaration": true,
+    "esModuleInterop": true,
+    "isolatedModules": true
+  },
+  "exclude": ["**/node_modules/**"]
+}