fix(npm): fix builds and exports

BREAKING CHANGE: may break imports and/or cause new build errors
myparcelnl · Mar 13, 2024 · 3aa81f2 · 3aa81f2
1 parent 5f8a237
commit 3aa81f2
Show file tree

Hide file tree

Showing 47 changed files with 560 additions and 161 deletions.
diff --git a/.gitignore b/.gitignore
@@ -19,6 +19,7 @@ vite.config.ts.timestamp-*
 *.sln
 *.suo
 *.sw?
+*.tgz
 .AppleDouble
 .DS_Store
 .LSOverride

diff --git a/apps/demo/package.json b/apps/demo/package.json
@@ -5,11 +5,15 @@
   "license": "MIT",
   "type": "module",
   "scripts": {
-    "build": "vite build",
-    "build:dev": "vite build --mode development",
-    "clean": "rimraf dist",
+    "build": "run ws:vite:build \"$(pwd)\"",
+    "build:dev": "run ws:vite:build:dev \"$(pwd)\"",
+    "clean": "run ws:clean \"$(pwd)\"",
     "serve": "vite",
-    "typecheck": "run ws:vue:typecheck \"$(pwd)\""
+    "test": "run ws:test \"$(pwd)\"",
+    "test:coverage": "run ws:test:coverage \"$(pwd)\"",
+    "test:run": "run ws:test:run \"$(pwd)\"",
+    "test:update": "run ws:test:update \"$(pwd)\"",
+    "typecheck": "run ws:vite:typecheck \"$(pwd)\""
   },
   "dependencies": {
     "@myparcel/constants": "^1.1.0",

diff --git a/apps/demo/src/components/Bonnetje.vue b/apps/demo/src/components/Bonnetje.vue
@@ -35,7 +35,7 @@
 
 <script lang="ts">
 import {computed, defineComponent} from 'vue';
-import {useForm} from '@myparcel/vue-form-builder/ts';
+import {useForm} from '@myparcel/vue-form-builder';
 
 export default defineComponent({
   name: 'Bonnetje',

diff --git a/apps/demo/src/components/ComponentWithoutElementProp.vue b/apps/demo/src/components/ComponentWithoutElementProp.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
 import {useVModel} from '@vueuse/core';
-import {useElement} from '@myparcel/vue-form-builder/ts';
+import {useElement} from '@myparcel/vue-form-builder';
 
 // eslint-disable-next-line vue/no-unused-properties
 const props = defineProps<{modelValue: string}>();

diff --git a/apps/demo/src/components/FormDiagnostics.vue b/apps/demo/src/components/FormDiagnostics.vue
@@ -26,7 +26,7 @@
 <script generic="V extends FormValues" lang="ts" setup>
 import {toRefs} from 'vue';
 import {type MaybeUnwrapNestedRefs, type FormValues} from '@myparcel-vfb/core';
-import {type FormInstance} from '@myparcel/vue-form-builder/ts';
+import {type FormInstance} from '@myparcel/vue-form-builder';
 import {useFormEventLog} from '../composables/useFormEventLog';
 
 // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-arguments

diff --git a/apps/demo/src/components/FormGroupWithoutElementProp.vue b/apps/demo/src/components/FormGroupWithoutElementProp.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
-import {useElement} from '@myparcel/vue-form-builder/ts';
+import {useElement} from '@myparcel/vue-form-builder';
 
 const element = useElement();
 </script>
diff --git a/apps/demo/src/components/Heading.vue b/apps/demo/src/components/Heading.vue
@@ -4,7 +4,7 @@
 
 <script lang="ts">
 import {type PropType, defineComponent} from 'vue';
-import {type InteractiveElementInstance} from '@myparcel/vue-form-builder/ts';
+import {type InteractiveElementInstance} from '@myparcel/vue-form-builder';
 
 export default defineComponent({
   name: 'Heading',

diff --git a/apps/demo/src/components/template/FormGroup.vue b/apps/demo/src/components/template/FormGroup.vue
@@ -21,7 +21,7 @@
 
 <script lang="ts">
 import {defineComponent, type PropType, type UnwrapNestedRefs} from 'vue';
-import {type InteractiveElementInstance} from '@myparcel/vue-form-builder/ts';
+import {type InteractiveElementInstance} from '@myparcel/vue-form-builder';
 import {translate} from '../../translate';
 import ErrorBox from './ErrorBox.vue';
 

diff --git a/apps/demo/src/components/template/TButton.vue b/apps/demo/src/components/template/TButton.vue
@@ -15,7 +15,7 @@
 
 <script lang="ts">
 import {defineComponent, type PropType} from 'vue';
-import {type PlainElementInstance} from '@myparcel/vue-form-builder/ts';
+import {type PlainElementInstance} from '@myparcel/vue-form-builder';
 import LoadingOverlay from '../LoadingOverlay.vue';
 import {translate} from '../../translate';
 

diff --git a/apps/demo/src/components/template/THiddenInput.vue b/apps/demo/src/components/template/THiddenInput.vue
@@ -7,7 +7,7 @@
 <script lang="ts">
 import {defineComponent, type PropType} from 'vue';
 import {useVModel} from '@vueuse/core';
-import {type InteractiveElementInstance} from '@myparcel/vue-form-builder/ts';
+import {type InteractiveElementInstance} from '@myparcel/vue-form-builder';
 
 export default defineComponent({
   name: 'TTextInput',

diff --git a/apps/demo/src/components/template/TNumberInput.vue b/apps/demo/src/components/template/TNumberInput.vue
@@ -16,7 +16,7 @@
 <script lang="ts">
 import {defineComponent, type PropType} from 'vue';
 import {useVModel} from '@vueuse/core';
-import {type InteractiveElementInstance} from '@myparcel/vue-form-builder/ts';
+import {type InteractiveElementInstance} from '@myparcel/vue-form-builder';
 
 export default defineComponent({
   name: 'TNumberInput',

diff --git a/apps/demo/src/components/template/TResetButton.vue b/apps/demo/src/components/template/TResetButton.vue
@@ -9,7 +9,7 @@
 
 <script lang="ts">
 import {defineComponent, type PropType} from 'vue';
-import {type PlainElementInstance} from '@myparcel/vue-form-builder/ts';
+import {type PlainElementInstance} from '@myparcel/vue-form-builder';
 import {translate} from '../../translate';
 import TButton from './TButton.vue';
 

diff --git a/apps/demo/src/components/template/TSelect.vue b/apps/demo/src/components/template/TSelect.vue
@@ -19,7 +19,7 @@
 <script lang="ts">
 import {computed, type ComputedRef, defineComponent, type PropType, watch} from 'vue';
 import {useVModel} from '@vueuse/core';
-import {type InteractiveElementInstance, type SelectOption} from '@myparcel/vue-form-builder/ts';
+import {type InteractiveElementInstance, type SelectOption} from '@myparcel/vue-form-builder';
 
 export default defineComponent({
   name: 'TSelect',

diff --git a/apps/demo/src/components/template/TSubmitButton.vue b/apps/demo/src/components/template/TSubmitButton.vue
@@ -26,7 +26,7 @@
 
 <script lang="ts">
 import {defineComponent, type PropType} from 'vue';
-import {type PlainElementInstance} from '@myparcel/vue-form-builder/ts';
+import {type PlainElementInstance} from '@myparcel/vue-form-builder';
 import LoadingOverlay from '../LoadingOverlay.vue';
 import {translate} from '../../translate';
 

diff --git a/apps/demo/src/components/template/TTextInput.vue b/apps/demo/src/components/template/TTextInput.vue
@@ -15,7 +15,7 @@
 <script lang="ts">
 import {defineComponent, type PropType} from 'vue';
 import {useVModel} from '@vueuse/core';
-import {type InteractiveElementInstance} from '@myparcel/vue-form-builder/ts';
+import {type InteractiveElementInstance} from '@myparcel/vue-form-builder';
 
 export default defineComponent({
   name: 'TTextInput',

diff --git a/apps/demo/src/components/template/TToggleSwitch.vue b/apps/demo/src/components/template/TToggleSwitch.vue
@@ -20,7 +20,7 @@
 /* eslint-disable vue/no-unused-properties */
 import {defineComponent, type PropType} from 'vue';
 import {useVModel} from '@vueuse/core';
-import {type InteractiveElementInstance} from '@myparcel/vue-form-builder/ts';
+import {type InteractiveElementInstance} from '@myparcel/vue-form-builder';
 
 export default defineComponent({
   name: 'TToggleSwitch',

diff --git a/apps/demo/src/components/template/TableFormGroup.vue b/apps/demo/src/components/template/TableFormGroup.vue
@@ -30,7 +30,7 @@
 
 <script lang="ts">
 import {type PropType, defineComponent} from 'vue';
-import {type InteractiveElementInstance} from '@myparcel/vue-form-builder/ts';
+import {type InteractiveElementInstance} from '@myparcel/vue-form-builder';
 import {translate} from '../../translate';
 
 export default defineComponent({

diff --git a/apps/demo/src/composables/useAddressForm.ts b/apps/demo/src/composables/useAddressForm.ts
@@ -1,8 +1,8 @@
 /* eslint-disable */
 // @ts-nocheck
-import {defineForm, Form, SelectOption} from '@myparcel/vue-form-builder/ts';
+import {defineForm, SelectOption, FormInstance} from '@myparcel/vue-form-builder';
 
-const postcodeHousenumberValidation = async (form: Form) => {
+const postcodeHousenumberValidation = async (form: FormInstance) => {
   form.model.postcodeHousenumberValidation.visible = false;
 
   if (form.model.postcode && form.model.housenumber && form.model.country === 'NL') {

diff --git a/apps/demo/src/forms/noPropForm.ts b/apps/demo/src/forms/noPropForm.ts
@@ -1,5 +1,5 @@
 import {ref} from 'vue';
-import {defineField, defineForm} from '@myparcel/vue-form-builder/ts';
+import {defineField, defineForm} from '@myparcel/vue-form-builder';
 import FormGroupWithoutElementProp from '../components/FormGroupWithoutElementProp.vue';
 import ComponentWithoutElementProp from '../components/ComponentWithoutElementProp.vue';
 

diff --git a/apps/demo/src/forms/shipmentOptionsForm.tsx b/apps/demo/src/forms/shipmentOptionsForm.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
 import {ref, toValue} from 'vue';
-import {defineField, defineForm, type InteractiveElementInstance} from '@myparcel/vue-form-builder/ts';
+import {defineField, defineForm, type InteractiveElementInstance} from '@myparcel/vue-form-builder';
 import {isOfType} from '@myparcel/ts-utils';
 import {type CarrierName, PACKAGE_TYPE_IDS_TO_NAMES, PackageTypeName} from '@myparcel/constants';
 import {translate} from '../translate';

diff --git a/apps/demo/src/main.ts b/apps/demo/src/main.ts
@@ -1,7 +1,7 @@
 import './assets/main.scss';
 import {createApp} from 'vue';
 import {VueQueryPlugin} from '@tanstack/vue-query';
-import {MyParcelFormBuilderPlugin} from '@myparcel/vue-form-builder/ts';
+import {MyParcelFormBuilderPlugin} from '@myparcel/vue-form-builder';
 import router from './router';
 import App from './App.vue';
 

diff --git a/apps/demo/src/test/elementTypes.types.ts b/apps/demo/src/test/elementTypes.types.ts
@@ -6,7 +6,7 @@ import {
   type PlainElementConfiguration,
   defineField,
   defineForm,
-} from '@myparcel/vue-form-builder/ts';
+} from '@myparcel/vue-form-builder';
 
 const interactiveFieldConfig = {
   name: 'name',

diff --git a/apps/demo/src/validation/stringContainsValidator.ts b/apps/demo/src/validation/stringContainsValidator.ts
@@ -1,4 +1,4 @@
-import {type Validator} from '@myparcel/vue-form-builder/ts';
+import {type Validator} from '@myparcel/vue-form-builder';
 import {type OneOrMore, toArray} from '@myparcel/ts-utils';
 
 export const stringContainsValidator = (search: OneOrMore<string>): Validator<string> => {

diff --git a/apps/demo/src/views/EditAddressView.vue b/apps/demo/src/views/EditAddressView.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts" setup>
-import {MagicForm} from '@myparcel/vue-form-builder/ts';
+import {MagicForm} from '@myparcel/vue-form-builder';
 import {useAddressForm} from '../composables/useAddressForm';
 
 const form = useAddressForm();

diff --git a/apps/demo/src/views/NoPropView.vue b/apps/demo/src/views/NoPropView.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script lang="ts" setup>
-import {MagicForm} from '@myparcel/vue-form-builder/ts';
+import {MagicForm} from '@myparcel/vue-form-builder';
 import {noPropForm} from '../forms/noPropForm';
 import FormDiagnostics from '../components/FormDiagnostics.vue';
 

diff --git a/apps/demo/src/views/ShipmentOptionsView.vue b/apps/demo/src/views/ShipmentOptionsView.vue
@@ -22,7 +22,7 @@
 <script lang="ts" setup>
 import {computed, ref, watch, toValue} from 'vue';
 import {type FormInstance} from '@myparcel-vfb/core';
-import {MagicForm} from '@myparcel/vue-form-builder/ts';
+import {MagicForm} from '@myparcel/vue-form-builder';
 import {shipmentOptionsForm} from '../forms/shipmentOptionsForm';
 import FormDiagnostics from '../components/FormDiagnostics.vue';
 

diff --git a/apps/demo/vite.config.ts b/apps/demo/vite.config.ts
@@ -1,8 +1,9 @@
-import {defineConfig} from 'vite';
-import vue from '@vitejs/plugin-vue';
+import {createViteConfig} from '@myparcel-vfb/build-vite';
 
-export default defineConfig({
-  plugins: [vue()],
+export default createViteConfig({
+  build: {
+    lib: false,
+  },
 
   esbuild: {
     jsxFactory: 'h',

diff --git a/apps/vue-form-builder/package.json b/apps/vue-form-builder/package.json
@@ -9,40 +9,28 @@
   ],
   "license": "MIT",
   "type": "module",
-  "exports": {
-    ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "require": {
-        "types": "./dist/index.cjs",
-        "default": "./dist/index.cjs"
-      }
-    },
-    "./ts": {
-      "types": "./dist/index.d.ts",
-      "import": "./src/index.ts"
-    }
-  },
+  "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
-    "./dist",
-    "./src"
+    "./dist"
   ],
   "scripts": {
-    "build": "vite build",
-    "build:dev": "vite build --mode development",
+    "build": "run ws:vite:build \"$(pwd)\"",
+    "build:dev": "run ws:vite:build:dev \"$(pwd)\"",
     "clean": "run ws:clean \"$(pwd)\"",
-    "typecheck": "run ws:ts:typecheck \"$(pwd)\""
+    "test": "run ws:test \"$(pwd)\"",
+    "test:coverage": "run ws:test:coverage \"$(pwd)\"",
+    "test:run": "run ws:test:run \"$(pwd)\"",
+    "test:update": "run ws:test:update \"$(pwd)\"",
+    "typecheck": "run ws:vite:typecheck \"$(pwd)\""
   },
   "dependencies": {
     "@myparcel-vfb/core": "workspace:^1.0.0-beta.39",
     "@myparcel-vfb/hook-manager": "workspace:^1.0.0-beta.11",
     "@myparcel-vfb/plugin": "workspace:^1.0.0-beta.39",
     "@myparcel-vfb/utils": "workspace:^1.0.0-beta.6",
-    "@myparcel/ts-utils": "^1.6.0",
-    "@vueuse/core": "^10.1.2"
+    "@myparcel/ts-utils": ">= 1.6.0",
+    "@vueuse/core": ">= 10.1.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.0.0",

diff --git a/apps/vue-form-builder/vite.config.ts b/apps/vue-form-builder/vite.config.ts
@@ -1,35 +1,8 @@
-import {copyFileSync} from 'node:fs';
-import dts from 'vite-plugin-dts';
-import customTsConfig from 'vite-plugin-custom-tsconfig';
-import {defineConfig} from 'vite';
-import vue from '@vitejs/plugin-vue';
-
-export default defineConfig((env) => {
-  const isProd = env.mode === 'production';
+import {createViteConfig} from '@myparcel-vfb/build-vite';
 
+export default createViteConfig(() => {
   return {
-    plugins: [
-      vue(),
-      dts({
-        entryRoot: 'src',
-        afterBuild: () => {
-          // To pass publint (`npm x publint@latest`) and ensure the
-          // package is supported by all consumers, we must export types that are
-          // read as ESM. To do this, there must be duplicate types with the
-          // correct extension supplied in the package.json exports field.
-          copyFileSync('dist/index.d.ts', 'dist/index.d.cts');
-        },
-      }),
-      customTsConfig(),
-    ],
     build: {
-      minify: false,
-      sourcemap: !isProd,
-      lib: {
-        entry: 'src/index.ts',
-        fileName: 'index',
-        formats: ['es', 'cjs'],
-      },
       rollupOptions: {
         external: ['vue', '@myparcel/ts-utils', '@vueuse/core'],
         output: {

diff --git a/libs/build-vite/index.d.ts b/libs/build-vite/index.d.ts
@@ -0,0 +1,7 @@
+import {type ConfigEnv, type UserConfigExport} from 'vitest/dist/config';
+import {type UserConfigFn} from 'vitest/config';
+import {type PromiseOr, type RecursivePartial} from '@myparcel/ts-utils';
+
+declare function createViteConfig(
+  config?: PromiseOr<RecursivePartial<UserConfigExport> | ((env: ConfigEnv) => RecursivePartial<UserConfigExport>)>,
+): UserConfigFn;
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,6 +19,7 @@ vite.config.ts.timestamp-* @@
     *.sln
     *.suo
     *.sw?
+    *.tgz
     .AppleDouble
     .DS_Store
     .LSOverride
@@ Expand Down @@