init

.gitignore

@@ -0,0 +1,6 @@
+.DS_Store
+node_modules
+yarn.lock
+package-lock.json
+index.js
+index.mjs

README.md

@@ -0,0 +1,33 @@
+*Psst — looking for an app template? Go here --> [sveltejs/template](https://github.com/sveltejs/template)*
+
+---
+
+# component-template
+
+A base for building shareable Svelte components. Clone it with [degit](https://github.com/Rich-Harris/degit):
+
+```bash
+npx degit sveltejs/component-template my-new-component
+cd my-new-component
+npm install # or yarn
+```
+
+Your component's source code lives in `src/index.html`.
+
+TODO
+
+* [ ] some firm opinions about the best way to test components
+* [ ] update `degit` so that it automates some of the setup work
+
+
+## Setting up
+
+* Run `npm init` (or `yarn init`)
+* Replace this README with your own
+
+
+## Consuming components
+
+Your package.json has a `"svelte"` field pointing to `src/index.html`, which allows Svelte apps to import the source code directly, if they are using a bundler plugin like [rollup-plugin-svelte](https://github.com/rollup/rollup-plugin-svelte) or [svelte-loader](https://github.com/sveltejs/svelte-loader) (where [`resolve.mainFields`](https://webpack.js.org/configuration/resolve/#resolve-mainfields) in your webpack config includes `"svelte"`). **This is recommended.**
+
+For everyone else, `npm run build` will bundle your component's source code into a plain JavaScript module (`index.mjs`) and a UMD script (`index.js`). This will happen automatically when you publish your component to npm, courtesy of the `prepublishOnly` hook in package.json.

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "SvelteComponent",
+  "svelte": "src/index.svelte",
+  "module": "index.mjs",
+  "main": "index.js",
+  "scripts": {
+    "build": "rollup -c",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "rollup": "^1.11.0",
+    "rollup-plugin-node-resolve": "^4.0.0",
+    "rollup-plugin-svelte": "^5.0.0",
+    "svelte": "^3.0.0"
+  },
+  "keywords": [
+    "svelte"
+  ],
+  "files": [
+    "src",
+    "index.mjs",
+    "index.js"
+  ]
+}

rollup.config.js

@@ -0,0 +1,20 @@
+import svelte from 'rollup-plugin-svelte';
+import resolve from 'rollup-plugin-node-resolve';
+import pkg from './package.json';
+
+const name = pkg.name
+	.replace(/^(@\S+\/)?(svelte-)?(\S+)/, '$3')
+	.replace(/^\w/, m => m.toUpperCase())
+	.replace(/-\w/g, m => m[1].toUpperCase());
+
+export default {
+	input: 'src/index.svelte',
+	output: [
+		{ file: pkg.module, 'format': 'es' },
+		{ file: pkg.main, 'format': 'umd', name }
+	],
+	plugins: [
+		svelte(),
+		resolve()
+	]
+};

src/index.svelte

@@ -0,0 +1,41 @@
+<script context="module">
+  // 2. This code loads the IFrame Player API code asynchronously.
+  var tag = document.createElement("script");
+
+  tag.src = "https://www.youtube.com/iframe_api";
+  var firstScriptTag = document.getElementsByTagName("script")[0];
+  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+  window.onYouTubeIframeAPIReady = function() {
+    //console.log('hello')
+    window.dispatchEvent(new Event("YouTubeIframeAPIReady"))
+  }
+</script>
+
+<script>
+  let player;
+  import { createEventDispatcher } from "svelte";
+  const dispatch = createEventDispatcher();
+  let divId = "player_"+parseInt(Math.random() * 100000).toString()
+  export let videoId;
+  window.addEventListener("YouTubeIframeAPIReady", function(){
+      console.log('load player..')
+      player =  new YT.Player(divId, {
+          height: '390',
+          width: '640',
+          videoId: videoId,
+          events: {
+            //'onReady': onPlayerReady,
+            'onStateChange': onPlayerStateChange
+          }
+        });
+  })
+  function onPlayerStateChange({data}){
+    dispatch("StateChange",data)
+  }
+  export function playVideo(){
+    player.playVideo()
+  }
+</script>
+YT-Component VID: {videoId}<br>
+<div id={divId}></div><br>