fix!: refactor to avoid name collisions

package.json

@@ -26,16 +26,25 @@
   "exports": {
     "./three": {
       "types": "./dist/three.d.ts",
-      "import": "./dist/three.js"
+      "default": "./dist/three.js"
     },
     "./pmndrs": {
       "types": "./dist/pmndrs.d.ts",
-      "import": "./dist/pmndrs.js"
+      "default": "./dist/pmndrs.js"
     },
     "./*": "./*"
   },
+  "typesVersions": {
+    "*": {
+      "three": [
+        "./dist/three.d.ts"
+      ],
+      "pmndrs": [
+        "./dist/pmndrs.d.ts"
+      ]
+    }
+  },
   "files": [
-    "*.d.ts",
     "dist"
   ],
   "publishConfig": {
@@ -44,7 +53,7 @@
   "scripts": {
     "dev": "cd playground && npm run dev",
     "playground": "cd playground && npm run dev",
-    "build": "vite build",
+    "build": "vite build && node ./scripts/postbuild.mjs",
     "preview": "vite preview",
     "release": "release-it",
     "lint": "eslint .",

playground-nuxt/nuxt.config.ts

@@ -6,6 +6,16 @@ export default defineNuxtConfig({
   modules: [
     '@tresjs/nuxt',
   ],
+  typescript: {
+    tsConfig: {
+      compilerOptions: {
+        paths: {
+          '@tresjs/post-processing/pmndrs': ['../../src/core/pmndrs'],
+          '@tresjs/post-processing/three': ['../../src/core/three'],
+        },
+      },
+    },
+  },
   vite: {
     resolve: {
       alias: {

playground-nuxt/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@tresjs/cientos": "^4.0.3",
     "@tresjs/nuxt": "^3.0.7",
-    "@tresjs/post-processing": "^0.7.1",
+    "@tresjs/post-processing": "workspace:*",
     "@types/three": "^0.169.0"
   },
   "devDependencies": {

playground-nuxt/pages/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { EffectComposer, Glitch } from '@tresjs/post-processing/pmndrs'
+import { EffectComposerPmndrs, GlitchPmndrs } from '@tresjs/post-processing/pmndrs'
 import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 
 const gl = {
@@ -26,9 +26,9 @@ const gl = {
     <TresGridHelper />
     <TresAmbientLight :intensity="1" />
     <Suspense>
-      <EffectComposer>
-        <Glitch />
-      </EffectComposer>
+      <EffectComposerPmndrs>
+        <GlitchPmndrs />
+      </EffectComposerPmndrs>
     </Suspense>
   </TresCanvas>
 </template>

playground/src/components/OutlineDemo.vue

@@ -2,7 +2,7 @@
 import type { Intersection, Object3D } from 'three'
 import { OrbitControls, useTweakPane } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-import { EffectComposer, Outline } from '@tresjs/post-processing/pmndrs'
+import { EffectComposerPmndrs, OutlinePmndrs } from '@tresjs/post-processing/pmndrs'
 import { BasicShadowMap, NoToneMapping } from 'three'
 import { reactive, ref } from 'vue'
 
@@ -61,12 +61,12 @@ pane.addInput(outlineParameters, 'visibleEdgeColor')
     <TresGridHelper />
     <TresAmbientLight :intensity="1" />
     <Suspense>
-      <EffectComposer>
-        <Outline
+      <EffectComposerPmndrs>
+        <OutlinePmndrs
           :outlined-objects="outlinedObjects"
           v-bind="outlineParameters"
         />
-      </EffectComposer>
+      </EffectComposerPmndrs>
     </Suspense>
   </TresCanvas>
 </template>

playground/src/components/TheExperience.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
-import { EffectComposer, Glitch } from '@tresjs/post-processing/pmndrs'
+import { EffectComposerPmndrs, GlitchPmndrs } from '@tresjs/post-processing/pmndrs'
 import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 
 const gl = {
@@ -30,9 +30,9 @@ const gl = {
     <TresGridHelper />
     <TresAmbientLight :intensity="1" />
     <Suspense>
-      <EffectComposer>
-        <Glitch />
-      </EffectComposer>
+      <EffectComposerPmndrs>
+        <GlitchPmndrs />
+      </EffectComposerPmndrs>
     </Suspense>
   </TresCanvas>
 </template>

playground/tsconfig.json

@@ -8,7 +8,8 @@
     "module": "ESNext",
     "moduleResolution": "bundler",
     "paths": {
-      "@tresjs/post-processing": ["../dist/"]
+      "@tresjs/post-processing/pmndrs": ["../dist/pmndrs"],
+      "@tresjs/post-processing/three": ["../dist/three"],
     },
     "resolveJsonModule": true,
     "strict": true,

scripts/postbuild.mjs

@@ -0,0 +1,42 @@
+import { readFile, writeFile, readdir } from 'node:fs/promises'
+
+/**
+ * Fix node16 issue: https://www.typescriptlang.org/tsconfig/#allowArbitraryExtensions
+ * - node10 and bundler will check for d.vue.ts and vue.d.ts file when importing a vue file in a dts
+ * - node16 will check only for d.vue.ts file, this function will just copy/paste the content of vue.d.ts to d.vue.ts
+ *
+ * @param path {String}
+ * @return {Promise<void>}
+ */
+async function patchVueDts(path) {
+  const files = await readdir(path, { recursive: false })
+  for (const file of files) {
+    if (file.endsWith('.vue.d.ts')) {
+      await writeFile(`${path}/${file.replace('.vue.d.ts', '.d.vue.ts')}`, await readFile(`${path}/${file}`, 'utf-8'), 'utf-8')
+    }
+  }
+}
+
+/**
+ * Adds `.js` when importing the core/xxx/index.js in the dts
+ *
+ * @param pmndrsDts {Boolean}
+ * @return {Promise<void>}
+ */
+async function patchRootDts(pmndrsDts) {
+  const dts = `dist/${pmndrsDts ? 'pmndrs' : 'three'}.d.ts`
+  const replacement = `./core/${pmndrsDts ? 'pmndrs' : 'three'}/index`
+  const content = await readFile(dts, 'utf8')
+  await writeFile(dts, content.replace(replacement, `${replacement}.js`))
+}
+
+async function fixNode16() {
+  await Promise.all([
+    patchRootDts(true),
+    patchRootDts(false),
+    patchVueDts('dist/core/pmndrs'),
+    patchVueDts('dist/core/three'),
+  ])
+}
+
+fixNode16()