Fix/merge webpack (#160)

* bump dependencies

* fix: handle plugins from user

* refactor: merge multiple providers

.changeset/dirty-beers-share.md

@@ -0,0 +1,5 @@
+---
+'react-showroom': patch
+---
+
+Bug fix: Fix broken build if any plugins is provided by user

.changeset/sour-crabs-refuse.md

@@ -0,0 +1,9 @@
+---
+'@showroomjs/core': minor
+'@showroomjs/device-frames': minor
+'@showroomjs/measure': minor
+'react-showroom': minor
+'@showroomjs/ui': minor
+---
+
+Bump dependencies

docs/package.json

@@ -4,13 +4,13 @@
   "license": "MIT",
   "version": "1.1.39",
   "dependencies": {
-    "@babel/runtime": "^7.18.6",
+    "@babel/runtime": "^7.18.9",
     "@heroicons/react": "^1.0.6",
     "classnames": "^2.3.1",
     "esbuild-loader": "^2.19.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.33.1",
+    "react-hook-form": "^7.34.0",
     "react-showroom": "workspace:*"
   },
   "scripts": {
@@ -19,13 +19,13 @@
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.2",
-    "autoprefixer": "^10.4.7",
+    "autoprefixer": "^10.4.8",
     "css-loader": "^6.7.1",
     "css-minimizer-webpack-plugin": "^4.0.0",
     "mini-css-extract-plugin": "^2.6.1",
-    "postcss": "^8.4.14",
-    "postcss-loader": "^7.0.0",
+    "postcss": "^8.4.16",
+    "postcss-loader": "^7.0.1",
     "style-loader": "^3.3.1",
-    "tailwindcss": "^3.1.4"
+    "tailwindcss": "^3.1.8"
   }
 }

examples/client-only-example/package.json

@@ -8,17 +8,17 @@
     "build-showroom": "react-showroom build"
   },
   "dependencies": {
-    "@babel/runtime": "^7.18.6",
+    "@babel/runtime": "^7.18.9",
     "classnames": "^2.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-showroom": "workspace:*"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.7",
-    "postcss": "^8.4.14",
-    "tailwindcss": "^3.1.4",
+    "autoprefixer": "^10.4.8",
+    "postcss": "^8.4.16",
+    "tailwindcss": "^3.1.8",
     "typescript": "~4.6.4",
-    "webpack": "^5.73.0"
+    "webpack": "^5.74.0"
   }
 }

examples/cra-example/package.json

@@ -3,13 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.3.0",
-    "@testing-library/user-event": "^14.2.1",
-    "@types/jest": "^28.1.4",
+    "@testing-library/user-event": "^14.4.2",
+    "@types/jest": "^28.1.6",
     "@types/node": "^18.0.1",
-    "@types/react": "^18.0.14",
-    "@types/react-dom": "^18.0.5",
+    "@types/react": "^18.0.16",
+    "@types/react-dom": "^18.0.6",
     "classnames": "^2.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -46,7 +46,7 @@
   "devDependencies": {
     "@types/testing-library__jest-dom": "^5.14.5",
     "react-showroom": "workspace:*",
-    "sass": "^1.53.0",
-    "tailwindcss": "^3.1.4"
+    "sass": "^1.54.3",
+    "tailwindcss": "^3.1.8"
   }
 }

examples/react-example/package.json

@@ -15,7 +15,7 @@
     "test:e2e": "pnpm run test:playwright -c playwright.ssr.config.ts && pnpm run test:playwright -c playwright.spa.config.ts"
   },
   "dependencies": {
-    "@babel/runtime": "^7.18.6",
+    "@babel/runtime": "^7.18.9",
     "@heroicons/react": "^1.0.6",
     "@tailwindcss/forms": "^0.5.2",
     "classnames": "^2.3.1",
@@ -24,31 +24,33 @@
     "msw": "^0.42.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.33.1",
+    "react-hook-form": "^7.34.0",
     "react-query": "^3.39.1",
     "react-showroom": "workspace:*",
     "react-textarea-autosize": "^8.3.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.6",
-    "@babel/plugin-transform-runtime": "^7.18.6",
-    "@babel/preset-env": "^7.18.6",
+    "@babel/core": "^7.18.10",
+    "@babel/plugin-transform-runtime": "^7.18.10",
+    "@babel/preset-env": "^7.18.10",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@testing-library/dom": "^8.14.0",
+    "@testing-library/dom": "^8.16.1",
     "@testing-library/react": "^13.3.0",
-    "@testing-library/user-event": "^14.2.1",
-    "@types/jest": "^28.1.4",
-    "autoprefixer": "^10.4.7",
+    "@testing-library/user-event": "^14.4.2",
+    "@types/jest": "^28.1.6",
+    "@vanilla-extract/css": "^1.7.2",
+    "@vanilla-extract/webpack-plugin": "^2.1.11",
+    "autoprefixer": "^10.4.8",
     "babel-loader": "^8.2.5",
     "css-loader": "^6.7.1",
-    "jest": "^28.1.2",
-    "postcss": "^8.4.14",
-    "postcss-loader": "^7.0.0",
+    "jest": "^28.1.3",
+    "postcss": "^8.4.16",
+    "postcss-loader": "^7.0.1",
     "style-loader": "^3.3.1",
-    "tailwindcss": "^3.1.4",
+    "tailwindcss": "^3.1.8",
     "typescript": "~4.6.4",
-    "webpack": "^5.73.0"
+    "webpack": "^5.74.0"
   },
   "msw": {
     "workerDirectory": "public"

examples/react-example/react-showroom.config.js

@@ -1,8 +1,9 @@
 // @ts-check
 const path = require('path');
 const { defineConfig } = require('react-showroom');
+const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');
 
-module.exports = defineConfig((command) => ({
+module.exports = defineConfig(() => ({
   require: ['tailwindcss/tailwind.css', './src/custom.css'],
   items: [
     {
@@ -75,4 +76,7 @@ module.exports = defineConfig((command) => ({
   },
   assetDir: 'public',
   wrapper: 'docs/provider.tsx',
+  webpackConfig: {
+    plugins: [new VanillaExtractPlugin()],
+  },
 }));

examples/react-example/src/components/form-control/text-input.css.ts

@@ -0,0 +1,6 @@
+import { style } from '@vanilla-extract/css';
+
+export const baseStyle = style({
+  borderRadius: '6px',
+  borderColor: '#d1d5db',
+});

examples/react-example/src/components/form-control/text-input.tsx

@@ -1,6 +1,7 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { callAll } from '../../lib/call-all';
+import { baseStyle } from './text-input.css';
 
 export interface TextInputProps
   extends React.ComponentPropsWithoutRef<'input'> {
@@ -21,7 +22,7 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       <input
         type="text"
         className={cx(
-          'rounded-md border-gray-300',
+          baseStyle,
           inputProps.disabled && 'bg-gray-200',
           className
         )}

examples/subpath-example/package.json

@@ -16,20 +16,20 @@
     "test:e2e": "playwright test"
   },
   "dependencies": {
-    "@babel/runtime": "^7.18.6",
+    "@babel/runtime": "^7.18.9",
     "@tailwindcss/forms": "^0.5.2",
     "classnames": "^2.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-showroom": "workspace:*"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.7",
+    "autoprefixer": "^10.4.8",
     "msw": "^0.42.1",
-    "postcss": "^8.4.14",
-    "postcss-loader": "^7.0.0",
-    "tailwindcss": "^3.1.4",
-    "tsup": "6.1.3",
+    "postcss": "^8.4.16",
+    "postcss-loader": "^7.0.1",
+    "tailwindcss": "^3.1.8",
+    "tsup": "6.2.1",
     "typescript": "~4.6.4"
   },
   "msw": {

package.json

@@ -5,41 +5,41 @@
   "main": "index.js",
   "license": "MIT",
   "devDependencies": {
-    "@changesets/cli": "^2.23.0",
-    "@playwright/test": "^1.23.1",
-    "@rollup/plugin-commonjs": "^22.0.1",
+    "@changesets/cli": "^2.24.2",
+    "@playwright/test": "^1.24.2",
+    "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-typescript": "^8.3.3",
+    "@rollup/plugin-typescript": "^8.3.4",
     "@types/cross-spawn": "^6.0.2",
     "@types/fs-extra": "^9.0.13",
     "@types/github-slugger": "^1.3.0",
     "@types/glob": "^7.2.0",
     "@types/hast": "^2.3.4",
-    "@types/jest": "^28.1.4",
+    "@types/jest": "^28.1.6",
     "@types/lz-string": "^1.3.34",
     "@types/mdast": "^3.0.10",
     "@types/mime-types": "^2.1.1",
-    "@types/react": "^18.0.14",
-    "@types/react-dom": "^18.0.5",
+    "@types/react": "^18.0.16",
+    "@types/react-dom": "^18.0.6",
     "@types/react-helmet": "^6.1.5",
     "@types/react-highlight-words": "^0.16.4",
     "@types/rimraf": "^3.0.2",
     "@types/string-similarity": "^4.0.0",
     "@types/stringify-object": "4.0.1",
     "@types/temp": "^0.9.1",
-    "concurrently": "^7.2.2",
+    "concurrently": "^7.3.0",
     "http-server": "^14.1.1",
-    "jest": "^28.1.2",
+    "jest": "^28.1.3",
     "monaco-editor": "^0.33.0",
     "prettier": "^2.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.75.7",
-    "tailwindcss": "^3.1.4",
-    "ts-jest": "^28.0.5",
-    "turbo": "^1.3.1",
-    "type-fest": "^2.16.0",
+    "rollup": "^2.77.2",
+    "tailwindcss": "^3.1.8",
+    "ts-jest": "^28.0.7",
+    "turbo": "^1.4.2",
+    "type-fest": "^2.18.0",
     "why-is-node-running": "^2.2.2"
   },
   "scripts": {

packages/core/package.json

@@ -18,20 +18,20 @@
     "test:ci": "jest --watchAll=false --coverage --runInBand"
   },
   "devDependencies": {
-    "axe-core": "^4.4.2",
-    "esbuild": "0.14.48",
+    "axe-core": "^4.4.3",
+    "esbuild": "0.14.53",
     "html-webpack-tags-plugin": "^3.0.2",
     "react-docgen-typescript": "^2.2.2",
     "typescript": "~4.6.4",
-    "webpack": "^5.73.0"
+    "webpack": "^5.74.0"
   },
   "peerDependencies": {
     "axe-core": "*",
     "esbuild": "^0.14.0",
     "webpack": "^5.0.0"
   },
   "dependencies": {
-    "acorn": "^8.7.1",
+    "acorn": "^8.8.0",
     "acorn-walk": "^8.2.0",
     "domutils": "^3.0.1",
     "htmlparser2": "^8.0.1",

packages/device-frames/package.json

@@ -17,8 +17,8 @@
     "dev": "pnpm run build --watch"
   },
   "devDependencies": {
-    "postcss": "^8.4.14",
-    "tsup": "6.1.3",
+    "postcss": "^8.4.16",
+    "tsup": "6.2.1",
     "typescript": "~4.6.4"
   },
   "dependencies": {

packages/measure/package.json

@@ -17,7 +17,7 @@
     "dev": "pnpm run build --watch"
   },
   "devDependencies": {
-    "tsup": "6.1.3",
+    "tsup": "6.2.1",
     "typescript": "~4.6.4"
   },
   "files": [

packages/react-showroom/client/app/preview-app.tsx

@@ -5,7 +5,7 @@ import {
   SupportedLanguage,
 } from '@showroomjs/core';
 import { useMeasure } from '@showroomjs/measure';
-import { Alert, useConstant, useId } from '@showroomjs/ui';
+import { Alert, useConstant, useId, Tooltip } from '@showroomjs/ui';
 import * as React from 'react';
 import allCompMetadata from 'react-showroom-all-components-docs';
 import allImports from 'react-showroom-all-imports';
@@ -34,16 +34,18 @@ const componentsMetas = Object.values(allCompMetadata);
 export const PreviewApp = () => {
   return (
     <Wrapper>
-      <CodeImportsContextProvider value={allImports}>
-        <Routes>
-          <Route
-            path="/:codeHash/:componentId"
-            element={<ComponentPreviewPage />}
-          />
-          <Route path="/:codeHash" element={<GenericPreviewPage />} />
-          <Route path="*" element={<ErrorPage />} />
-        </Routes>
-      </CodeImportsContextProvider>
+      <Tooltip.Provider>
+        <CodeImportsContextProvider value={allImports}>
+          <Routes>
+            <Route
+              path="/:codeHash/:componentId"
+              element={<ComponentPreviewPage />}
+            />
+            <Route path="/:codeHash" element={<GenericPreviewPage />} />
+            <Route path="*" element={<ErrorPage />} />
+          </Routes>
+        </CodeImportsContextProvider>
+      </Tooltip.Provider>
     </Wrapper>
   );
 };