feat(pie-monorepo): DSW-2056 integrate pie-webc into react18 examples… (

#1609) * feat(pie-monorepo): DSW-2056 integrate pie-webc into react18 examples app and switch to vite * feat(pie-monorepo): DSW-2056 include lit react package * feat(pie-monorepo): DSW-2056 revert versioning number from new build * feat(pie-monorepo): DSW-2056 update package file to revert removed changes * feat(pie-monorepo): DSW-2056 pr comments --------- Co-authored-by: Xander Marjoram <[email protected]>
justeattakeaway · Jul 23, 2024 · 0e2456c · 0e2456c
1 parent 62bd1cf
commit 0e2456c
Show file tree

Hide file tree

Showing 13 changed files with 531 additions and 499 deletions.
diff --git a/.changeset/nervous-singers-give.md b/.changeset/nervous-singers-give.md
@@ -0,0 +1,5 @@
+---
+"wc-react18": minor
+---
+
+[Added] - pie-webc integration and switch to using vite to resolve bundling error
diff --git a/apps/examples/wc-react18/.eslintrc.js b/apps/examples/wc-react18/.eslintrc.js
@@ -1,5 +1,4 @@
 module.exports = {
-    root: true,
     extends: [
         require.resolve('@justeattakeaway/eslint-config-pie/strict'),
     ],

diff --git a/apps/examples/wc-react18/.gitignore b/apps/examples/wc-react18/.gitignore
@@ -1,11 +1,24 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
 
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/sdks
-!.yarn/versions
+node_modules
+dist
+dist-ssr
+*.local
 
-# production
-/build
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/apps/examples/wc-react18/README.md b/apps/examples/wc-react18/README.md
@@ -1,20 +1,21 @@
-## How to use React App
+# React + Vite
 
-### `yarn dev`
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+Currently, two official plugins are available:
 
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
 
-### `yarn build`
 
-Builds the app for production to the `build` folder.\
+### `yarn dev`
 
+Runs the app in the development mode.
 
 #### Using Web Components in React
 
-React 18 and previous versions don't handle web components and custom elements out of the box correctly in all cases due to how React treats custom props and events (More details can be found [here](https://lit.dev/docs/frameworks/react/)). Our solution for this is to wrap the web component to include the `[@lit/react](https://lit.dev/docs/frameworks/react/)` package, generating a `react` file inside the component's `dist` folder.
+React 18 and previous versions don't handle web components and custom elements out of the box correctly in all cases due to how React treats custom props and events (More details can be found [here](https://lit.dev/docs/frameworks/react/)). Our solution for this is to wrap the web component to include the `[@lit/react](https://lit.dev/docs/frameworks/react/)` package, generating a `react` file inside the component's `dist` folder.
 
-Therefore, in order to import the web component into your React application, please use:
+### Example
 
-import { PieButton } from '@justeattakeaway/pie-button/dist/react';
+import { PieButton } from '@justeattakeaway/pie-webc/react/button.js';
diff --git a/apps/examples/wc-react18/index.html b/apps/examples/wc-react18/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/apps/examples/wc-react18/package.json b/apps/examples/wc-react18/package.json
@@ -1,18 +1,30 @@
 {
   "name": "wc-react18",
-  "version": "0.5.42",
   "private": true,
+  "version": "0.5.42",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
   "dependencies": {
-    "@justeattakeaway/pie-button": "0.47.8",
     "@justeattakeaway/pie-css": "0.12.1",
+    "@justeattakeaway/pie-webc": "0.5.13",
     "@lit/react": "1.0.5",
     "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-scripts": "5.0.1"
+    "react-dom": "18.3.1"
   },
-  "scripts": {
-    "dev": "react-scripts start",
-    "build:examples": "react-scripts build"
+  "devDependencies": {
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "@vitejs/plugin-react": "4.3.1",
+    "eslint": "8.57.0",
+    "eslint-plugin-react": "7.34.3",
+    "eslint-plugin-react-hooks": "4.6.2",
+    "eslint-plugin-react-refresh": "0.4.7",
+    "vite": "5.3.4"
   },
   "browserslist": [
     "extends @justeattakeaway/browserslist-config-pie"

diff --git a/apps/examples/wc-react18/public/index.html b/apps/examples/wc-react18/public/index.html
diff --git a/apps/examples/wc-react18/src/styles.css → apps/examples/wc-react18/src/App.css b/apps/examples/wc-react18/src/styles.css → apps/examples/wc-react18/src/App.css
@@ -25,3 +25,10 @@
 * {
     font-family: JETSansDigital, Arial, sans-serif;
 }
+
+#root {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+}
diff --git a/apps/examples/wc-react18/src/App.js → apps/examples/wc-react18/src/App.jsx b/apps/examples/wc-react18/src/App.js → apps/examples/wc-react18/src/App.jsx
@@ -1,10 +1,10 @@
-import { useState } from 'react';
-import { PieButton } from '@justeattakeaway/pie-button/dist/react';
+import { useState } from 'react'
+import { PieButton } from '@justeattakeaway/pie-webc/react/button.js';
 
 import '@justeattakeaway/pie-css';
-import './styles.css';
+import './App.css';
 
-function App () {
+function App() {
     const [counter, setCounter] = useState(0);
 
     return (
@@ -16,11 +16,11 @@ function App () {
             <h2>onClick</h2>
             <p>Count: {counter}</p>
             <PieButton
-            // eslint-disable-next-line no-console
+                // eslint-disable-next-line no-console
                 onClick={(e) => setCounter(counter + 1) + console.log(e)}
             >Increment</PieButton>
         </>
-    );
+    )
 }
 
-export default App;
+export default App
diff --git a/apps/examples/wc-react18/src/index.js b/apps/examples/wc-react18/src/index.js
diff --git a/apps/examples/wc-react18/src/main.jsx b/apps/examples/wc-react18/src/main.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
diff --git a/apps/examples/wc-react18/vite.config.js b/apps/examples/wc-react18/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})