built tester by using multiple build

package.json

@@ -7,7 +7,8 @@
   "main": "main.js",
   "scripts": {
     "dev": "vite --host --port 3333",
-    "build": "tsc && vite build",
+    "build": "tsc && vite build --mode Timeline",
+    "build:tester": "tsc && vite build --mode Tester",
     "preview": "vite preview",
     "lint:code": "biome lint ./",
     "lint:style": "biome format ./",

src/dispatcher.ts

@@ -1,6 +1,5 @@
-//import './styles/main.sass'
-import { TimelineOptions } from './types/definitions'
-import { Timeline } from './SunorhcTimeline'
+import { TimelineOptions } from '@/types/definitions'
+import { Timeline } from '@/SunorhcTimeline'
 
 // Set type of handling to dispatch plugin:
 const creationType: number = 3

src/main.ts

@@ -1,3 +1,3 @@
-import { Timeline } from './SunorhcTimeline'
+import { Timeline } from '@/SunorhcTimeline'
 
 export { Timeline }

src/tester.ts

@@ -1,4 +1,4 @@
-import { setupTester } from './SunorhcTimelineTester'
+import { setupTester } from '@/tester/SunorhcTimelineTester'
 
 document.querySelector<HTMLDivElement>('#tester')!.innerHTML = `
   <div id="sunorhc-timeline-tester"></div>

src/tester/global.d.ts

@@ -0,0 +1,5 @@
+declare var getRect: (element: HTMLElement) => DOMRect
+
+interface Window {
+    SunorhcTimelineInstances: Record<string, Timeline>;
+}

src/tester/main.ts

@@ -0,0 +1,3 @@
+import { setupTester } from '@/tester/SunorhcTimelineTester'
+
+export { setupTester }

vite.config.ts

@@ -4,83 +4,99 @@ import * as path from 'path'
 import basicSsl from '@vitejs/plugin-basic-ssl'
 import tsconfigPaths from 'vite-tsconfig-paths'
 
-export default defineConfig({
-    define: {
-        //__DEV__: mode === 'development',
-        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
-    },
-    root: '',
-    base: '/',
-    publicDir: 'public',
-    build: {
-        outDir: './dist',
-        emptyOutDir: true,
-        manifest: true,
-        lib: {
-            entry: path.resolve(__dirname, 'src/main.ts'),
-            name: 'Sunorhc',
-            formats: ['es', 'umd'],
-            fileName: (format) => `SunorhcTimeline.${format}.js`
+export default defineConfig(({ mode }) => {
+    const isMain = mode === 'Timeline'
+
+    return {
+        define: {
+            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
         },
-        rollupOptions: {
-            external: [
-                'pino',
-                path.resolve(__dirname, 'src/dispatcher.ts'),
-                path.resolve(__dirname, 'src/SunorhcTimelineTester.ts'),
-                path.resolve(__dirname, 'src/tester.ts'),
-                /^.+(dispatcher|SunorhcTimelineTester|tester)\.ts$/,
-                /test/,
-            ],
-            //input: [ 'src/index.html', ],
-            output: {
-                globals: {
-                    pino: 'pino',
+        root: '',
+        base: '/',
+        publicDir: 'public',
+        build: {
+            outDir: './dist',
+            emptyOutDir: true,
+            manifest: true,
+            lib: {
+                entry: path.resolve(__dirname, 'src/main.ts'),
+                name: 'Sunorhc',
+                fileName: (format) => `SunorhcTimeline.${format}.js`
+            },
+            rollupOptions: {
+                input: isMain
+                    ? path.resolve(__dirname, 'src/main.ts')
+                    : path.resolve(__dirname, 'src/tester/main.ts'),
+                output: {
+                    globals: {
+                        pino: 'pino',
+                    },
+                    entryFileNames: isMain ? 'assets/js/sunorhc.timeline.js' : `assets/js/${mode}.js`,// `assets/js/[name].js`,
+                    chunkFileNames: `assets/js/[name].js`,
+                    assetFileNames: (assetInfo) => {
+                        if (/\.(gif|jpe?g|png|svg|webp)$/.test(assetInfo.name!)) {
+                            return `assets/images/[name].[ext]`
+                        } else if (/\.css$/.test(assetInfo.name!)) {
+                            return 'assets/css/sunorhc.timeline.[ext]'// `assets/css/[name].[ext]`
+                        } else {
+                            return `assets/[name].[ext]`
+                        }
+                    },
+                    format: 'umd',
+                    inlineDynamicImports: false,
                 },
-                entryFileNames: `assets/js/[name].js`,
-                chunkFileNames: `assets/js/[name].js`,
-                assetFileNames: (assetInfo) => {
-                    if (/\.(gif|jpe?g|png|svg|webp)$/.test(assetInfo.name!)) {
-                        return `assets/images/[name].[ext]`
-                    } else if (/\.css$/.test(assetInfo.name!)) {
-                        return `assets/css/[name].[ext]`
-                    } else {
-                        return `assets/[name].[ext]`
+                external: (source, importer) => {
+                    if (importer) {
+                        //console.log(source, importer, isResolved)
+                        if (importer.includes('src/main.ts')) {
+                            return [
+                                'pino',
+                                path.resolve(__dirname, 'src/dispatcher.ts'),
+                                path.resolve(__dirname, 'src/SunorhcTimelineTester.ts'),
+                                path.resolve(__dirname, 'src/tester.ts'),
+                                /tester/,
+                            ].includes(source)
+                        }
+                        if (importer.includes('src/tester/main.ts')) {
+                            return [
+                                'pino',
+                            ].includes(source)
+                        }
                     }
+                    return false
                 },
             },
         },
-    },
-    envDir: './',
-    plugins: [
-        basicSsl(),
-        tsconfigPaths({
-            root: './',
-        }),
-    ],
-    css: {
-        postcss: './postcss.config.cjs'
-    },
-    test: {
-        globals: true,
-        environment: 'happy-dom',
-        setupFiles: ['./vitest.setup.ts'],// for using jest-dom
-        include: [
-            'test/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}',
-            //'src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'
+        envDir: './',
+        plugins: [
+            basicSsl(),
+            tsconfigPaths({
+                root: './',
+            }),
         ],
-        //exclude: ['test/**/_*'],
-        coverage: {
-            provider: 'v8',// or 'istanbul'
-            reporter: ['text', 'json', 'html'],
-            reportsDirectory: 'docs/coverage',
-            exclude: [
-                'docs/**/*',
-                'mock/**/*',
-                'public/**/*',
-                'src/**/_*',
-                'postcss.config.cjs',
-            ],
-            all: true,
+        css: {
+            postcss: './postcss.config.cjs'
         },
+        test: {
+            globals: true,
+            environment: 'happy-dom',
+            setupFiles: ['./vitest.setup.ts'],// for using jest-dom
+            include: [
+                'test/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}',
+            ],
+            coverage: {
+                provider: 'v8',// or 'istanbul'
+                reporter: ['text', 'json', 'html'],
+                reportsDirectory: 'docs/coverage',
+                exclude: [
+                    'docs/**/*',
+                    'mock/**/*',
+                    'public/**/*',
+                    'src/**/_*',
+                    'postcss.config.cjs',
+                ],
+                all: true,
+            },
+        }
     }
 })