feat: macro for vite (#386)

* feat: init

* remove unused

* feat: use unreleased code

* update package.json

* relint

* use node 14 for github actions

* add macro-vite to build

* add chokidar

* relint

* macro vite in exports

* use aslemammad-vite-plugin-macro

* lint

* add readme

* Update package.json

Co-authored-by: Daishi Kato <dai-shi@users.noreply.github.com>

* rollup

* revert eslint

* update tsconfig

* change vite version

* remove skipLibCheck

* update yarn lock

* add ts-ignore

* add eslint comment

* revert

* patch

* Update package.json

Co-authored-by: Daishi Kato <dai-shi@users.noreply.github.com>

* Update package.json

Co-authored-by: Daishi Kato <dai-shi@users.noreply.github.com>

* Update package.json

Co-authored-by: Daishi Kato <dai-shi@users.noreply.github.com>

* update lock

* add postinstall

* remove chokidar

Co-authored-by: Daishi Kato <dai-shi@users.noreply.github.com>

.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,20 +40,28 @@
       "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": [
     "**"
   ],
   "sideEffects": false,
   "scripts": {
+    "postinstall": "patch-package",
     "prebuild": "shx rm -rf dist",
     "build": "concurrently -m 8 'yarn:build:*'",
     "build-watch": "concurrently -n watch: 'yarn:build:* --watch'",
     "build:base": "rollup -c",
     "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,6 +164,7 @@
     "@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",
     "concurrently": "^7.0.0",
@@ -173,6 +182,8 @@
     "jest": "^27.5.1",
     "json": "^11.0.0",
     "lint-staged": "^12.3.4",
+    "patch-package": "^6.4.7",
+    "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.5.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -181,18 +192,27 @@
     "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"
   },
   "peerDependencies": {
     "@babel/helper-module-imports": ">=7.12",
     "@babel/types": ">=7.13",
+    "aslemammad-vite-plugin-macro": ">=1.0.0-alpha.1",
     "babel-plugin-macros": ">=3.0",
-    "react": ">=16.8"
+    "react": ">=16.8",
+    "vite": ">=2.8.6"
   },
   "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    },
+    "aslemammad-vite-plugin-macro": {
+      "optional": true
+    },
     "@babel/helper-module-imports": {
       "optional": true
     },

patches/vite+2.8.6.patch

@@ -0,0 +1,13 @@
+diff --git a/node_modules/vite/dist/node/index.d.ts b/node_modules/vite/dist/node/index.d.ts
+index cb3a834..a253ff0 100644
+--- a/node_modules/vite/dist/node/index.d.ts
++++ b/node_modules/vite/dist/node/index.d.ts
+@@ -1175,7 +1175,7 @@ export declare interface PackageData {
+  * If a plugin should be applied only for server or build, a function format
+  * config file can be used to conditional determine the plugins to use.
+  */
+-export declare interface Plugin extends Plugin_2 {
++export declare interface Plugin {
+     /**
+      * Enforce plugin invocation tier similar to webpack loaders.
+      *

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.

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()
+})