Improve demo start

README.md

@@ -39,7 +39,7 @@ Also works with CSS Animations that use a `view-timeline` or `scroll-timeline`
 }
 ```
 
-Please ensure your CSS is hosted on the same domain as your website or included directly on the page within a <style> tag.
+Please ensure your CSS is hosted on the same domain as your website or included directly on the page within a &lt;style&gt; tag.
 
 If you are loading stylesheets from other origins, the polyfill might not be able to fetch and apply them correctly, due to browser security restrictions.
 
@@ -52,8 +52,7 @@ For more details on and use-cases of scroll-driven animations, please refer to [
 Running a dev environment
 
 ```shell script
-npm i
-npm run dev 
+npm start
 ```
 
 Then open the browser `http://localhost:3000`, choose one of the demos (test) to see how your changes. 

package.json

@@ -5,9 +5,10 @@
   "type": "module",
   "scripts": {
     "build": "vite build",
-    "build-lite" : "vite build --config vite.config.lite.js", 
+    "build-lite" : "vite build --config vite.config.lite.js",
     "dev": "vite",
     "deploy": "npm run build && npm run build-lite",
+    "start": "npm run build && npm run dev",
     "test-setup": "node test/setup/checkout-wpt.mjs",
     "test:wpt": "npm run test-setup && cd test && cd wpt && (python wpt run --headless -y --log-wptreport ../report/data.json --log-wptscreenshot=../report/screenshots.txt --log-html=../report/index.html --inject-script ../../dist/scroll-timeline.js firefox scroll-animations || true)",
     "test:simple": "npm run test-setup && cd test && cd wpt && python wpt serve --inject-script ../../dist/scroll-timeline.js",

vite.config.common.js

@@ -4,25 +4,25 @@ export function buildConfig(source, filename) {
             sourcemap: true,
             emptyOutDir: false,
             lib: {
-            // Could also be a dictionary or array of multiple entry points
-            entry: source,
-            name: 'ScrollTimeline',
-            // the proper extensions will be added
-            fileName: (format, entryAlias) => `${filename}${format=='iife'?'':'-' + format}.js`,
-            formats: ['iife'],
+                // Could also be a dictionary or array of multiple entry points
+                entry: source,
+                name: 'ScrollTimeline',
+                // the proper extensions will be added
+                fileName: (format, entryAlias) => `${filename}${format=='iife'?'':'-' + format}.js`,
+                formats: ['iife'],
             },
             minify: 'terser',
             terserOptions: {
-            keep_classnames: /^((View|Scroll)Timeline)|CSS.*$/
+                keep_classnames: /^((View|Scroll)Timeline)|CSS.*$/
             },
             rollupOptions: {
-            output: {
-                // Provide global variables to use in the UMD build
-                // for externalized deps
-                globals: {
+                output: {
+                    // Provide global variables to use in the UMD build
+                    // for externalized deps
+                    globals: {
+                    },
                 },
-            },
             }
         }
     };
-}
+}