[zero][vite][app] Showcase usage and transformation of UI library

imported from node_modules
mui · Oct 19, 2023 · 37d4ceb · 37d4ceb
1 parent cd3ef6f
commit 37d4ceb
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 67 deletions.
diff --git a/apps/local-library/index.d.ts b/apps/local-library/index.d.ts
@@ -0,0 +1,7 @@
+// eslint-disable-next-line import/prefer-default-export
+export const bounceAnim: string;
+export const Button: React.ComponentType<
+  JSX.IntrinsicElements['button'] & {
+    isRed?: boolean;
+  }
+>;
diff --git a/apps/local-library/index.js b/apps/local-library/index.js
@@ -0,0 +1,32 @@
+import { keyframes, styled } from '@mui/zero-runtime';
+
+// eslint-disable-next-line import/prefer-default-export
+export const bounceAnim = keyframes({
+  'from, 20%, 53%, 80%, to': {
+    transform: 'translate3d(0,0,0)',
+  },
+  '40%, 43%': {
+    transform: 'translate3d(0, -30px, 0)',
+  },
+  '70%': {
+    transform: 'translate3d(0, -15px, 0)',
+  },
+  '90%': {
+    transform: 'translate3d(0,-4px,0)',
+  },
+});
+
+export const Button = styled('button', {
+  name: 'MuiButton',
+  slot: 'Root',
+})(
+  ({ theme }) => ({
+    fontFamily: 'sans-serif',
+    backgroundColor: theme.palette.primary.main,
+  }),
+  {
+    fontFamily: 'sans-serif',
+    color: (props) => (props.isRed ? 'primary.main' : 'secondary.main'),
+    '--css-variable': (props) => (props.isRed ? 'palette.primary.main' : 'palette.secondary.main'),
+  },
+);
diff --git a/apps/local-library/package.json b/apps/local-library/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "local-ui-lib",
+  "version": "0.0.0",
+  "dependencies": {
+    "zero-runtime": "*"
+  }
+}
diff --git a/apps/zero-runtime-vite-app/package.json b/apps/zero-runtime-vite-app/package.json
@@ -26,6 +26,7 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jsdom": "^22.1.0",
+    "local-library": "file:../local-library",
     "vite": "4.4.11",
     "vitest": "^0.34.6"
   },

diff --git a/apps/zero-runtime-vite-app/src/App.tsx b/apps/zero-runtime-vite-app/src/App.tsx
@@ -1,52 +1,8 @@
 import * as React from 'react';
-import { styled, keyframes } from '@mui/zero-runtime';
+import { styled } from '@mui/zero-runtime';
+import { Button, bounceAnim } from 'local-library';
 import Slider from './Slider/ZeroSlider';
 
-const bounce = keyframes`
-  from, 20%, 53%, 80%, to {
-    transform: translate3d(0,0,0);
-  }
-  40%, 43% {
-    transform: translate3d(0, -30px, 0);
-  }
-  70% {
-    transform: translate3d(0, -15px, 0);
-  }
-  90% {
-    transform: translate3d(0,-4px,0);
-  }
-`;
-
-const bounceAnim = keyframes({
-  'from, 20%, 53%, 80%, to': {
-    transform: 'translate3d(0,0,0)',
-  },
-  '40%, 43%': {
-    transform: 'translate3d(0, -30px, 0)',
-  },
-  '70%': {
-    transform: 'translate3d(0, -15px, 0)',
-  },
-  '90%': {
-    transform: 'translate3d(0,-4px,0)',
-  },
-});
-
-const Button = styled('button', {
-  name: 'MuiButton',
-  slot: 'Root',
-})(
-  ({ theme }: any) => ({
-    fontFamily: 'sans-serif',
-    backgroundColor: [theme.palette.primary.main, 'text.primary', 'background.paper'],
-  }),
-  {
-    fontFamily: 'sans-serif',
-    // p: (props: any) => (props.isRed ? 10 : 20),
-    color: (props: any) => (props.isRed ? 'primary.main' : 'secondary.main'),
-  },
-);
-
 const ShowCaseDiv = styled('div')({
   [`.${Button}`]: {
     color: '#f94564',
@@ -59,7 +15,7 @@ const HalfWidth = styled.div({
   maxHeight: 100,
   padding: 20,
   border: '1px solid #ccc',
-  animation: [`${bounce} 1s ease infinite`, `${bounceAnim} 1s ease infinite`],
+  animation: `${bounceAnim} 1s ease infinite`,
 });
 
 export default function App({ isRed }: any) {

diff --git a/apps/zero-runtime-vite-app/vite.config.ts b/apps/zero-runtime-vite-app/vite.config.ts
@@ -19,6 +19,7 @@ export default defineConfig({
     zeroVitePlugin({
       cssVariablesPrefix: 'app',
       theme,
+      transformLibraries: ['local-library'],
     }),
     reactPlugin(),
     splitVendorChunkPlugin(),

diff --git a/yarn.lock b/yarn.lock
@@ -2268,16 +2268,6 @@
     find-up "^5.0.0"
     minimatch "^9.0.3"
 
-"@linaria/vite@^4.5.4":
-  version "4.5.4"
-  resolved "https://registry.yarnpkg.com/@linaria/vite/-/vite-4.5.4.tgz#bbccbd3de67715a8b6759a578c086c1ab31ec8d2"
-  integrity sha512-YhaLgTAfE7xzRLJwxWjo0Ak/YOJ+kPWuOm3lrkziclsvf1bbTUHlecmvth+2KuJG8HEPReekuyDErnwIQoD6sA==
-  dependencies:
-    "@linaria/babel-preset" "^4.5.4"
-    "@linaria/logger" "^4.5.0"
-    "@linaria/utils" "^4.5.3"
-    "@rollup/pluginutils" "^4.1.0"
-
 "@material-ui/types@^4.0.0":
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-4.1.1.tgz#b65e002d926089970a3271213a3ad7a21b17f02b"
@@ -3088,14 +3078,6 @@
     "@rollup/pluginutils" "^5.0.1"
     magic-string "^0.30.3"
 
-"@rollup/pluginutils@^4.1.0":
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz#e6c6c3aba0744edce3fb2074922d3776c0af2a6d"
-  integrity sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==
-  dependencies:
-    estree-walker "^2.0.1"
-    picomatch "^2.2.2"
-
 "@rollup/pluginutils@^5.0.1":
   version "5.0.4"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.0.4.tgz#74f808f9053d33bafec0cc98e7b835c9667d32ba"
@@ -8200,7 +8182,7 @@ estree-walker@^0.6.1:
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362"
   integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==
 
-estree-walker@^2.0.1, estree-walker@^2.0.2:
+estree-walker@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
   integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
@@ -13726,7 +13708,7 @@ picocolors@^1.0.0:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
-picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3, picomatch@^2.3.1:
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==