first build

Author: eudangeld

rollup.config.js

@@ -2,70 +2,67 @@ import svelte from 'rollup-plugin-svelte';
 import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import livereload from 'rollup-plugin-livereload';
-import { terser } from 'rollup-plugin-terser';
+import {
+    terser
+} from 'rollup-plugin-terser';
 
 const production = !process.env.ROLLUP_WATCH;
 
 export default {
-	input: 'src/main.js',
-	output: {
-		sourcemap: true,
-		format: 'iife',
-		name: 'app',
-		file: 'public/build/bundle.js'
-	},
-	plugins: [
-		svelte({
-			// enable run-time checks when not in production
-			dev: !production,
-			// we'll extract any component CSS out into
-			// a separate file - better for performance
-			css: css => {
-				css.write('public/build/bundle.css');
-			}
-		}),
+    input: 'src/main.js',
+    output: {
+        sourcemap: true,
+        format: 'iife',
+        name: 'app',
+        file: 'public/build/bundle.js'
+    },
+    plugins: [
+        svelte({
+            customElement: true,
+            dev: !production,
+        }),
 
-		// If you have external dependencies installed from
-		// npm, you'll most likely need these plugins. In
-		// some cases you'll need additional configuration -
-		// consult the documentation for details:
-		// https://github.com/rollup/plugins/tree/master/packages/commonjs
-		resolve({
-			browser: true,
-			dedupe: ['svelte']
-		}),
-		commonjs(),
+        // If you have external dependencies installed from
+        // npm, you'll most likely need these plugins. In
+        // some cases you'll need additional configuration -
+        // consult the documentation for details:
+        // https://github.com/rollup/plugins/tree/master/packages/commonjs
+        resolve({
+            browser: true,
+            dedupe: ['svelte']
+        }),
+        commonjs(),
 
-		// In dev mode, call `npm run start` once
-		// the bundle has been generated
-		!production && serve(),
+        // In dev mode, call `npm run start` once
+        // the bundle has been generated
+        !production && serve(),
 
-		// Watch the `public` directory and refresh the
-		// browser on changes when not in production
-		!production && livereload('public'),
+        // Watch the `public` directory and refresh the
+        // browser on changes when not in production
+        !production && livereload('public'),
 
-		// If we're building for production (npm run build
-		// instead of npm run dev), minify
-		production && terser()
-	],
-	watch: {
-		clearScreen: false
-	}
+        // If we're building for production (npm run build
+        // instead of npm run dev), minify
+        production && terser()
+    ],
+    watch: {
+        clearScreen: false
+    }
 };
 
 function serve() {
-	let started = false;
+    let started = false;
 
-	return {
-		writeBundle() {
-			if (!started) {
-				started = true;
+    return {
+        writeBundle() {
+            if (!started) {
+                started = true;
 
-				require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
-					stdio: ['ignore', 'inherit', 'inherit'],
-					shell: true
-				});
-			}
-		}
-	};
-}
+                require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
+                    stdio: ['ignore', 'inherit', 'inherit'],
+                    shell: true
+                });
+            }
+        }
+    };
+}

src/main.js

@@ -1,4 +1,4 @@
-import App from './App.svelte';
+import App from './micro.svelte';
 
 const app = new App({
     target: document.body

src/App.svelte renamed to src/micro.svelte

@@ -1,5 +1,12 @@
 <script>
   let count = 0;
+
+  addEventListener("increment", e => increment(), false);
+
+  function dispatchIncrment() {
+    window.dispatchEvent(new CustomEvent("svelte", { detail: "micro-svelte" }));
+    // window.postMessage("increment", "*");
+  }
   function increment() {
     count += 1;
   }
@@ -17,6 +24,8 @@
   }
 </style>
 
+<svelte:options tag="svelte-micro" immutable={true} />
 <button on:click={increment}>INCREMENTAR</button>
 <p class={count > 0 ? 'positiVo' : 'negaAtiva'}>{count}</p>
 <button on:click={decrement}>DECREMENTAR</button>
+<button on:click={dispatchIncrment}>dispatchEvent</button>