chore: add extentsion in imports (#1678)

* chore: add extentsion in imports * fix github workflow * revert for zustand/context * do not patch :) * fix workflow file * update ts 5 * patch tsconfig * use old typescript for react 16 * downlevel-dts to 3.8 * Revert "downlevel-dts to 3.8" This reverts commit d03e526. * patch workflow file * patch for react 16 * remove ts3.4 in workflow * skipLibChecks * revert changes in test-multiple-versions.yml * fix sed * wip: add allowJs * Revert "wip: add allowJs" This reverts commit fca34d7. * use ts 495 * useESM false * Revert "useESM false" This reverts commit 07a91d8. * no coverage * no coverage 2 * no coverage 3 * wip * disable transform * revert a change * revert changes * test: try ignoring tests with dynamic imports * test: skip tests that require/tests modules in isolation * test: remove dynamic import * run skipped tests on CI * test: add new devtools imports to ci-only tests * revert CI-ONLY-* hack * wip: workaround for react 16 * wip: workaround for react 16 * wip: workaround for react 16 * wip: workaround for react 16 * wip: workaround for react 16 * wip: workaround for react 16 * wip: workaround for react 16 * wip: workaround for react 16 * wip: workaround for react 16 * wip: workaround for react 16 * wip: workaround for react 16 * CI-MATRIX- for devtools CI hacks * test: add env variable to test multiple builds workflow * hack await import * hack await import for another one * wip: experimenting workflow file * wip: experimenting workflow file * wip: experimenting workflow file * use different env name * wip: experimenting workflow file * do not use two envs * revert to NODE_ENV --------- Co-authored-by: Arjun <14841132+arjunvegda@users.noreply.github.com>
pmndrs · May 1, 2023 · f37530f · f37530f
1 parent 22db001
commit f37530f
Show file tree

Hide file tree

Showing 17 changed files with 152 additions and 136 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -36,6 +36,7 @@
     "prefer-const": "error",
     "curly": ["warn", "multi-line", "consistent"],
     "no-console": "off",
+    "import/extensions": ["error", "always"],
     "import/no-unresolved": ["error", { "commonjs": true, "amd": true }],
     "import/export": "error",
     "@typescript-eslint/no-duplicate-imports": ["error"],
@@ -93,12 +94,8 @@
       "@typescript-eslint/parser": [".js", ".jsx", ".ts", ".tsx"]
     },
     "import/resolver": {
-      "node": {
-        "extensions": [".js", ".jsx", ".ts", ".tsx", ".json"],
-        "paths": ["src"]
-      },
       "alias": {
-        "extensions": [".js", ".jsx", ".ts", ".tsx", ".json"],
+        "extensions": [".js", ".jsx", ".ts", ".tsx"],
         "map": [
           ["^zustand$", "./src/index.ts"],
           ["zustand", "./src"]
@@ -108,9 +105,9 @@
   },
   "overrides": [
     {
-      "files": ["src"],
-      "parserOptions": {
-        "project": "./tsconfig.json"
+      "files": ["tests/**/*.ts", "tests/**/*.tsx"],
+      "rules": {
+        "import/extensions": ["error", "never"]
       }
     },
     {

diff --git a/.github/workflows/test-multiple-builds.yml b/.github/workflows/test-multiple-builds.yml
@@ -14,6 +14,22 @@ jobs:
       matrix:
         build: [cjs, umd] # [cjs, esm, umd, system]
         env: [development, production]
+        devtools-skip:
+          - CI-MATRIX-NOSKIP
+        include:
+          - devtools-skip: CI-MATRIX-[2345]
+            build: umd
+          - devtools-skip: CI-MATRIX-[1345]
+            build: umd
+          - devtools-skip: CI-MATRIX-[1245]
+            build: umd
+          - devtools-skip: CI-MATRIX-[1235]
+            build: umd
+          - devtools-skip: CI-MATRIX-[1234]
+            build: umd
+        exclude:
+          - devtools-skip: CI-MATRIX-NOSKIP
+            build: umd
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
@@ -48,13 +64,23 @@ jobs:
           sed -i~ "1s/^/import.meta.env=import.meta.env||{};import.meta.env.MODE='${NODE_ENV}';/" tests/*.tsx
         env:
           NODE_ENV: ${{ matrix.env }}
-      - name: Patch for UMD/SystemJS
-        if: ${{ matrix.build == 'umd' || matrix.build == 'system' }}
+      - name: Patch for UMD
+        if: ${{ matrix.build == 'umd' }}
         run: |
-          sed -i~ "s/<rootDir>\/src\(.*\)\.ts/<rootDir>\/dist\/${BUILD}\1.${NODE_ENV}.js/" package.json
+          sed -i~ "s/<rootDir>\/src\(.*\)\.ts/<rootDir>\/dist\/umd\1.${NODE_ENV}.js/" package.json
           sed -i~ 's/"test:ci":.*,$/"test:ci": "jest",/' package.json
+          sed -i~ 's/= await import(/= require(/' tests/devtools.test.tsx
+        env:
+          NODE_ENV: ${{ matrix.env }}
+        run: |
+          sed -i~ "s/it('\[${DEVTOOLS_SKIP}\]/it.skip('/" tests/devtools.test.tsx
+        env:
+          DEVTOOLS_SKIP: ${{ matrix.devtools-skip }}
+      - name: Patch for SystemJS
+        if: ${{ matrix.build == 'system' }}
+        run: |
+          sed -i~ "s/<rootDir>\/src\(.*\)\.ts/<rootDir>\/dist\/system\1.${NODE_ENV}.js/" package.json
         env:
-          BUILD: ${{ matrix.build }}
           NODE_ENV: ${{ matrix.env }}
       - name: Test ${{ matrix.build }} ${{ matrix.env }}
         run: |

diff --git a/.github/workflows/test-multiple-versions.yml b/.github/workflows/test-multiple-versions.yml
@@ -35,6 +35,22 @@ jobs:
           - 18.2.0
           - 18.3.0-next-1308e49a6-20230330
           - 0.0.0-experimental-1308e49a6-20230330
+        devtools-skip:
+          - CI-MATRIX-NOSKIP
+        include:
+          - devtools-skip: CI-MATRIX-[2345]
+            react: 16.8.0
+          - devtools-skip: CI-MATRIX-[1345]
+            react: 16.8.0
+          - devtools-skip: CI-MATRIX-[1245]
+            react: 16.8.0
+          - devtools-skip: CI-MATRIX-[1235]
+            react: 16.8.0
+          - devtools-skip: CI-MATRIX-[1234]
+            react: 16.8.0
+        exclude:
+          - devtools-skip: CI-MATRIX-NOSKIP
+            react: 16.8.0
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
@@ -53,7 +69,11 @@ jobs:
           sed -i~ 's/"jsx": "react-jsx"/"jsx": "react"/' tsconfig.json
           sed -i~ 's/import\.meta\.env[?]\.MODE/"DEVELOPMENT".toLowerCase()/' src/*.ts src/*/*.ts
           sed -i~ 's/"test:ci":.*,$/"test:ci": "jest",/' package.json
-      - name: Test ${{ matrix.react }}
+          sed -i~ 's/= await import(/= require(/' tests/devtools.test.tsx
+          sed -i~ "s/it('\[${DEVTOOLS_SKIP}\]/it.skip('/" tests/devtools.test.tsx
+        env:
+          DEVTOOLS_SKIP: ${{ matrix.devtools-skip }}
+      - name: Test ${{ matrix.react }} ${{ matrix.devtools-skip }}
         run: |
           yarn add -D react@${{ matrix.react }} react-dom@${{ matrix.react }}
           yarn test:ci
diff --git a/.github/workflows/test-old-typescript.yml b/.github/workflows/test-old-typescript.yml
@@ -13,6 +13,7 @@ jobs:
       fail-fast: false
       matrix:
         typescript:
+          - 4.9.5
           - 4.8.4
           - 4.7.4
           - 4.6.4
@@ -35,6 +36,8 @@ jobs:
           sed -i~ 's/\/\/ @ts-expect-error.*\[LATEST-TS-ONLY\]//' tests/*.tsx
           sed -i~ 's/"target":/"skipLibCheck":true,"target":/' tsconfig.json
           sed -i~ 's/"exactOptionalPropertyTypes": true,//' tsconfig.json
+          sed -i~ 's/"moduleResolution": "nodenext",/"moduleResolution": "node",/' tsconfig.json
+          sed -i~ 's/"allowImportingTsExtensions": true,//' tsconfig.json
           sed -i~ 's/"zustand": \["\.\/src\/index\.ts"\],/"zustand": [".\/dist\/index.d.ts"],/' tsconfig.json
           sed -i~ 's/"zustand\/\*": \["\.\/src\/\*\.ts"\]/"zustand\/*": [".\/dist\/*.d.ts"]/' tsconfig.json
           sed -i~ 's/"include": .*/"include": ["src\/types.d.ts", "dist\/**\/*", "tests\/**\/*"],/' tsconfig.json

diff --git a/package.json b/package.json
@@ -85,7 +85,7 @@
     "build:middleware:immer": "rollup -c --config-middleware_immer",
     "build:shallow": "rollup -c --config-shallow",
     "build:context": "rollup -c --config-context",
-    "postbuild": "yarn copy && yarn patch-esm-ts",
+    "postbuild": "yarn patch-d-ts && yarn copy && yarn patch-esm-ts",
     "prettier": "prettier \"*.{js,json,md}\" \"{examples,src,tests,docs}/**/*.{js,jsx,ts,tsx,md,mdx}\" --write",
     "prettier:ci": "prettier '*.{js,json,md}' '{examples,src,tests,docs}/**/*.{js,jsx,ts,tsx,md,mdx}' --list-different",
     "eslint": "eslint --no-eslintrc --c .eslintrc.json --fix '*.{js,json}' '{src,tests}/**/*.{ts,tsx}'",
@@ -95,6 +95,7 @@
     "test:ci": "yarn node --experimental-vm-modules $(yarn bin jest)",
     "test:dev": "yarn node --experimental-vm-modules $(yarn bin jest) --watch --no-coverage",
     "test:coverage:watch": "yarn node --experimental-vm-modules $(yarn bin jest) --watch",
+    "patch-d-ts": "node -e \"var {entries}=require('./rollup.config.js');require('shelljs').find('dist/**/*.d.ts').forEach(f=>{entries.forEach(({find,replacement})=>require('shelljs').sed('-i',new RegExp(' from \\''+find.source.slice(0,-1)+'\\';$'),' from \\''+replacement+'\\';',f));require('shelljs').sed('-i',/ from '(\\.[^']+)\\.ts';$/,' from \\'\\$1\\';',f)})\"",
     "copy": "shx cp -r dist/src/* dist/esm && shx cp -r dist/src/* dist && shx rm -rf dist/src && shx rm -rf dist/{src,tests} && downlevel-dts dist dist/ts3.4 && shx cp package.json readme.md LICENSE dist && json -I -f dist/package.json -e \"this.private=false; this.devDependencies=undefined; this.optionalDependencies=undefined; this.scripts=undefined; this.prettier=undefined; this.jest=undefined;\"",
     "patch-esm-ts": "node -e \"require('shelljs').find('dist/esm/**/*.d.ts').forEach(f=>{var f2=f.replace(/\\.ts$/,'.mts');require('fs').copyFileSync(f,f2);require('shelljs').sed('-i',/ from '(\\.[^']+)';$/,' from \\'\\$1.mjs\\';',f2);require('shelljs').sed('-i',/^declare module '(\\.[^']+)'/,'declare module \\'\\$1.mjs\\'',f2)})\""
   },

diff --git a/rollup.config.js b/rollup.config.js
@@ -6,10 +6,11 @@ const replace = require('@rollup/plugin-replace')
 const terser = require('@rollup/plugin-terser')
 const typescript = require('@rollup/plugin-typescript')
 const { default: esbuild } = require('rollup-plugin-esbuild')
-const createBabelConfig = require('./babel.config')
+const createBabelConfig = require('./babel.config.js')
 
 const extensions = ['.js', '.ts', '.tsx']
 const { root } = path.parse(process.cwd())
+const entries = [{ find: /.*\/vanilla\.ts$/, replacement: 'zustand/vanilla' }]
 
 function external(id) {
   return !id.startsWith('.') && !id.startsWith(root)
@@ -55,11 +56,7 @@ function createESMConfig(input, output) {
     output: { file: output, format: 'esm' },
     external,
     plugins: [
-      alias({
-        entries: {
-          './vanilla': 'zustand/vanilla',
-        },
-      }),
+      alias({ entries }),
       resolve({ extensions }),
       replace({
         ...(output.endsWith('.js')
@@ -100,11 +97,7 @@ function createCommonJSConfig(input, output, options) {
     },
     external,
     plugins: [
-      alias({
-        entries: {
-          './vanilla': 'zustand/vanilla',
-        },
-      }),
+      alias({ entries }),
       resolve({ extensions }),
       replace({
         'import.meta.env?.MODE': 'process.env.NODE_ENV',
@@ -140,11 +133,7 @@ function createUMDConfig(input, output, env) {
     },
     external,
     plugins: [
-      alias({
-        entries: {
-          './vanilla': 'zustand/vanilla',
-        },
-      }),
+      alias({ entries }),
       resolve({ extensions }),
       replace({
         'import.meta.env?.MODE': JSON.stringify(env),
@@ -166,11 +155,7 @@ function createSystemConfig(input, output, env) {
     },
     external,
     plugins: [
-      alias({
-        entries: {
-          './vanilla': 'zustand/vanilla',
-        },
-      }),
+      alias({ entries }),
       resolve({ extensions }),
       replace({
         'import.meta.env?.MODE': JSON.stringify(env),
@@ -211,3 +196,5 @@ module.exports = function (args) {
     createSystemConfig(`src/${c}.ts`, `dist/system/${c}`, 'production'),
   ]
 }
+
+module.exports.entries = []
diff --git a/src/index.ts b/src/index.ts
@@ -1,3 +1,3 @@
-export * from './vanilla'
-export * from './react'
-export { default } from './react'
+export * from './vanilla.ts'
+export * from './react.ts'
+export { default } from './react.ts'
diff --git a/src/middleware.ts b/src/middleware.ts
@@ -1,5 +1,5 @@
-export * from './middleware/redux'
-export * from './middleware/devtools'
-export * from './middleware/subscribeWithSelector'
-export * from './middleware/combine'
-export * from './middleware/persist'
+export * from './middleware/redux.ts'
+export * from './middleware/devtools.ts'
+export * from './middleware/subscribeWithSelector.ts'
+export * from './middleware/combine.ts'
+export * from './middleware/persist.ts'
diff --git a/src/middleware/combine.ts b/src/middleware/combine.ts
@@ -1,4 +1,4 @@
-import type { StateCreator, StoreMutatorIdentifier } from '../vanilla'
+import type { StateCreator, StoreMutatorIdentifier } from '../vanilla.ts'
 
 type Write<T, U> = Omit<T, keyof U> & U
 

diff --git a/src/middleware/devtools.ts b/src/middleware/devtools.ts
@@ -1,5 +1,9 @@
 import type {} from '@redux-devtools/extension'
-import type { StateCreator, StoreApi, StoreMutatorIdentifier } from '../vanilla'
+import type {
+  StateCreator,
+  StoreApi,
+  StoreMutatorIdentifier,
+} from '../vanilla.ts'
 
 // Copy types to avoid import type { Config } from '@redux-devtools/extension'
 // https://github.com/pmndrs/zustand/issues/1205

diff --git a/src/middleware/immer.ts b/src/middleware/immer.ts
@@ -1,6 +1,6 @@
 import { produce } from 'immer'
 import type { Draft } from 'immer'
-import type { StateCreator, StoreMutatorIdentifier } from '../vanilla'
+import type { StateCreator, StoreMutatorIdentifier } from '../vanilla.ts'
 
 type Immer = <
   T,

diff --git a/src/middleware/persist.ts b/src/middleware/persist.ts
@@ -1,4 +1,8 @@
-import type { StateCreator, StoreApi, StoreMutatorIdentifier } from '../vanilla'
+import type {
+  StateCreator,
+  StoreApi,
+  StoreMutatorIdentifier,
+} from '../vanilla.ts'
 
 export interface StateStorage {
   getItem: (name: string) => string | null | Promise<string | null>

diff --git a/src/middleware/redux.ts b/src/middleware/redux.ts
@@ -1,5 +1,5 @@
-import type { StateCreator, StoreMutatorIdentifier } from '../vanilla'
-import type { NamedSet } from './devtools'
+import type { StateCreator, StoreMutatorIdentifier } from '../vanilla.ts'
+import type { NamedSet } from './devtools.ts'
 
 type Write<T, U> = Omit<T, keyof U> & U
 

diff --git a/src/middleware/subscribeWithSelector.ts b/src/middleware/subscribeWithSelector.ts
@@ -1,4 +1,4 @@
-import type { StateCreator, StoreMutatorIdentifier } from '../vanilla'
+import type { StateCreator, StoreMutatorIdentifier } from '../vanilla.ts'
 
 type SubscribeWithSelector = <
   T,

diff --git a/src/react.ts b/src/react.ts
@@ -3,14 +3,15 @@ import { useDebugValue } from 'react'
 // This doesn't work in ESM, because use-sync-external-store only exposes CJS.
 // See: https://github.com/pmndrs/valtio/issues/452
 // The following is a workaround until ESM is supported.
+// eslint-disable-next-line import/extensions
 import useSyncExternalStoreExports from 'use-sync-external-store/shim/with-selector'
-import { createStore } from './vanilla'
+import { createStore } from './vanilla.ts'
 import type {
   Mutate,
   StateCreator,
   StoreApi,
   StoreMutatorIdentifier,
-} from './vanilla'
+} from './vanilla.ts'
 
 const { useSyncExternalStoreWithSelector } = useSyncExternalStoreExports