feat(macro): macro for vite

.github/workflows/test-multiple-builds.yml

@@ -18,7 +18,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: '12'
+          node-version: '14'
           cache: yarn
       - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
       - run: yarn install --frozen-lockfile --check-files

.github/workflows/test-multiple-versions.yml

@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: '12'
+          node-version: '14'
           cache: yarn
       - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
       - run: yarn install --frozen-lockfile --check-files
@@ -47,7 +47,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: '12'
+          node-version: '14'
           cache: yarn
       - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
       - run: yarn install --frozen-lockfile --check-files

package.json

@@ -40,6 +40,12 @@
       "module": "./esm/macro.js",
       "import": "./esm/macro.mjs",
       "default": "./macro.js"
+    },
+    "./macro/vite": {
+      "types": "./esm/macro/vite.d.ts",
+      "module": "./esm/macro/vite.js",
+      "import": "./esm/macro/vite.mjs",
+      "default": "./macro/vite.js"
     }
   },
   "files": [
@@ -54,6 +60,7 @@
     "build:vanilla": "rollup -c --config-vanilla",
     "build:utils": "rollup -c --config-utils",
     "build:macro": "rollup -c --config-macro",
+    "build:macro-vite": "rollup -c --config-macro-vite",
     "postbuild": "yarn copy",
     "eslint": "eslint --fix '*.{js,json}' '{src,tests}/**/*.{ts,tsx}'",
     "eslint:ci": "eslint '*.{js,json}' '{src,tests}/**/*.{ts,tsx}'",
@@ -156,8 +163,10 @@
     "@types/react-dom": "^17.0.11",
     "@typescript-eslint/eslint-plugin": "^5.12.1",
     "@typescript-eslint/parser": "^5.12.1",
+    "aslemammad-vite-plugin-macro": "^1.0.0-alpha.1",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-tester": "^10.1.0",
+    "chokidar": "^3.5.3",
     "concurrently": "^7.0.0",
     "downlevel-dts": "^0.8.0",
     "esbuild": "^0.14.23",
@@ -181,7 +190,8 @@
     "rollup-plugin-terser": "^7.0.2",
     "shx": "^0.3.4",
     "tslib": "^2.3.1",
-    "typescript": "^4.5.5"
+    "typescript": "^4.5.5",
+    "vite": "^2.8.6"
   },
   "resolutions": {
     "date-fns": "2.27.0"
@@ -190,9 +200,17 @@
     "@babel/helper-module-imports": ">=7.12",
     "@babel/types": ">=7.13",
     "babel-plugin-macros": ">=3.0",
-    "react": ">=16.8"
+    "react": ">=16.8",
+    "vite": "*",
+    "aslemammad-vite-plugin-macro": "*"
   },
   "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    },
+    "aslemammad-vite-plugin-macro": {
+      "optional": true
+    },
     "@babel/helper-module-imports": {
       "optional": true
     },

readme.md

@@ -283,6 +283,21 @@ const Component = () => {
 }
 ```
 
+##### vite
+```
+npm i --save-dev aslemammad-vite-plugin-macro babel-plugin-macros 
+```
+
+And in your `vite.config.js`
+```js
+import { defineConfig } from "vite";
+import macro from 'valtio/macro/vite'
+
+export default defineConfig({
+  plugins: [macro],
+});
+```
+
 #### `derive` util
 
 You can subscribe to some proxies and create a derived proxy.

rollup.config.js

@@ -162,9 +162,13 @@ export default function (args) {
   let c = Object.keys(args).find((key) => key.startsWith('config-'))
   if (c) {
     c = c.slice('config-'.length).replace(/_/g, '/')
+    if (c === 'macro-vite') {
+      c = 'macro/vite'
+    }
   } else {
     c = 'index'
   }
+
   return [
     ...(c === 'index' ? [createDeclarationConfig(`src/${c}.ts`, 'dist')] : []),
     createCommonJSConfig(`src/${c}.ts`, `dist/${c}`),

src/macro/vite.ts

@@ -0,0 +1,63 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { addNamed } from '@babel/helper-module-imports'
+import * as t from '@babel/types'
+import {
+  createMacroPlugin,
+  defineMacro,
+  defineMacroProvider,
+} from 'aslemammad-vite-plugin-macro'
+import { MacroError } from 'babel-plugin-macros'
+
+export const valtioMacro = defineMacro(`useProxy`)
+  .withSignature(`<T extends object>(proxyObject: T): void`)
+  .withHandler((ctx) => {
+    const { path, args } = ctx
+    const hook = addNamed(path, 'useSnapshot', 'valtio')
+    const proxy = args[0]?.node
+
+    if (!t.isIdentifier(proxy)) throw new MacroError('no proxy object')
+
+    const snap = t.identifier(`valtio_macro_snap_${proxy.name}`)
+    path.parentPath?.replaceWith(
+      t.variableDeclaration('const', [
+        t.variableDeclarator(snap, t.callExpression(hook, [proxy])),
+      ])
+    )
+
+    let inFunction = 0
+    path.parentPath?.getFunctionParent()?.traverse({
+      Identifier(p) {
+        if (
+          inFunction === 0 && // in render
+          p.node !== proxy &&
+          p.node.name === proxy.name
+        ) {
+          p.node.name = snap.name
+        }
+      },
+      Function: {
+        enter() {
+          ++inFunction
+        },
+        exit() {
+          --inFunction
+        },
+      },
+    })
+  })
+
+export function provideValtioMacro() {
+  return defineMacroProvider({
+    id: 'valtio/macro',
+    exports: {
+      'valtio/macro': {
+        macros: [valtioMacro],
+      },
+    },
+  })
+}
+
+const macroPlugin = createMacroPlugin({}).use(provideValtioMacro())
+
+export default macroPlugin

tests/__snapshots__/macro-vite.test.ts.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`basic 1`] = `
+"import { useSnapshot as _useSnapshot } from \\"valtio\\";
+
+
+const Component = () => {const valtio_macro_snap_state = _useSnapshot(
+  state);
+  return (
+    <div>
+      {valtio_macro_snap_state.count}
+      <button onClick={() => ++state.count}>inc</button>
+    </div>);
+
+};"
+`;
+
+exports[`complex 1`] = `
+"import { useSnapshot as _useSnapshot } from \\"valtio\\";
+
+
+const Component = () => {const valtio_macro_snap_state = _useSnapshot(
+  state);
+  return (
+    <div>
+      <button onClick={() => {
+        ;(() => ++state.count)();
+        ++state.count;
+      }}>inc</button>
+      {valtio_macro_snap_state.count}
+    </div>);
+
+};"
+`;

tests/macro-vite.test.ts

@@ -0,0 +1,64 @@
+import { EnvContext } from '@typed-macro/core'
+import { createTransformer } from '@typed-macro/runtime'
+import { valtioMacro } from 'valtio/macro/vite'
+
+const env: EnvContext = {
+  host: 'test',
+  packageManager: 'test',
+  projectPath: [''],
+  dev: true,
+  ssr: false,
+}
+
+it('basic', async () => {
+  const transform = createTransformer({})
+  transform.appendMacros('valtio/macro', [valtioMacro])
+
+  expect(
+    transform.transform(
+      `
+import { useProxy } from 'valtio/macro'
+
+const Component = () => {
+  useProxy(state)
+  return (
+    <div>
+      {state.count}
+      <button onClick={() => ++state.count}>inc</button>
+    </div>
+  )
+}
+`,
+      'test.ts',
+      env
+    )
+  ).toMatchSnapshot()
+})
+
+it('complex', async () => {
+  const transform = createTransformer({})
+  transform.appendMacros('valtio/macro', [valtioMacro])
+
+  expect(
+    transform.transform(
+      `
+import { useProxy } from 'valtio/macro'
+
+const Component = () => {
+  useProxy(state)
+  return (
+    <div>
+      <button onClick={() => {
+        ;(() => ++state.count)()
+        ++state.count
+      }}>inc</button>
+      {state.count}
+    </div>
+  )
+}
+`,
+      'test.ts',
+      env
+    )
+  ).toMatchSnapshot()
+})

website/.eslintrc.json

@@ -1,4 +1,2 @@
 {
-  "root": true,
-  "extends": "next/core-web-vitals"
 }