justeattakeaway · xander-marjoram · Jul 23, 2024 · Jul 17, 2024 · Jul 17, 2024 · Jul 17, 2024
@@ -0,0 +1,5 @@
+---
+"wc-react18": minor
+---
+
+[Added] - pie-webc integration and switch to using vite to resolve bundling error
@@ -1,5 +1,4 @@
 module.exports = {
-    root: true,
     extends: [
         require.resolve('@justeattakeaway/eslint-config-pie/strict'),
     ],

@@ -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?
@@ -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';
@@ -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>
@@ -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"

@@ -25,3 +25,10 @@
 * {
     font-family: JETSansDigital, Arial, sans-serif;
 }
+
+#root {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+}
@@ -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
@@ -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>,
+)
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})