├── .gitignore
├── README.md
├── package.json
├── public
├── global.css
└── index.html
├── rollup.config.js
└── src
├── App.html
├── Box.html
├── Counter.html
└── main.js
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | public/bundle.*
4 | package-lock.json
5 | yarn.lock
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # svelte app
2 |
3 | This is a project template for [Svelte](https://svelte.technology) apps. It lives at https://github.com/sveltejs/template-custom-element.
4 |
5 | To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):
6 |
7 | ```bash
8 | npm install -g degit # you only need to do this once
9 |
10 | degit sveltejs/template-custom-element svelte-app
11 | cd svelte-app
12 | ```
13 |
14 | *Note that you will need to have [Node.js](https://nodejs.org) installed.*
15 |
16 |
17 | ## Get started
18 |
19 | Install the dependencies...
20 |
21 | ```bash
22 | cd svelte-app
23 | npm install
24 | ```
25 |
26 | ...then start [Rollup](https://rollupjs.org):
27 |
28 | ```bash
29 | npm run dev
30 | ```
31 |
32 | Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
33 |
34 |
35 | ## Deploying to the web
36 |
37 | ### With [now](https://zeit.co/now)
38 |
39 | Install `now` if you haven't already:
40 |
41 | ```bash
42 | npm install -g now
43 | ```
44 |
45 | Then, from within your project folder:
46 |
47 | ```bash
48 | now
49 | ```
50 |
51 | As an alternative, use the [Now desktop client](https://zeit.co/download) and simply drag the unzipped project folder to the taskbar icon.
52 |
53 | ### With [surge](https://surge.sh/)
54 |
55 | Install `surge` if you haven't already:
56 |
57 | ```bash
58 | npm install -g surge
59 | ```
60 |
61 | Then, from within your project folder:
62 |
63 | ```bash
64 | npm run build
65 | surge public
66 | ```
67 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "svelte-app",
3 | "version": "1.0.0",
4 | "devDependencies": {
5 | "rollup": "^0.62.0",
6 | "rollup-plugin-buble": "^0.19.2",
7 | "rollup-plugin-commonjs": "^9.1.3",
8 | "rollup-plugin-node-resolve": "^3.0.0",
9 | "rollup-plugin-svelte": "^4.0.0",
10 | "rollup-plugin-terser": "^1.0.1",
11 | "rollup-plugin-uglify": "^4.0.0",
12 | "serve": "^9.1.0",
13 | "svelte": "^2.8.1"
14 | },
15 | "scripts": {
16 | "build": "rollup -c",
17 | "dev": "serve public & rollup -c -w",
18 | "start": "serve public"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/public/global.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | position: relative;
3 | width: 100%;
4 | height: 100%;
5 | }
6 |
7 | body {
8 | color: #333;
9 | margin: 0;
10 | padding: 8px;
11 | box-sizing: border-box;
12 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
13 | }
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Svelte app
8 |
9 |
10 |
11 |
12 |
13 |
14 |
19 |
20 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import svelte from 'rollup-plugin-svelte';
2 | import resolve from 'rollup-plugin-node-resolve';
3 | import commonjs from 'rollup-plugin-commonjs';
4 | import { terser } from 'rollup-plugin-terser';
5 |
6 | const production = !process.env.ROLLUP_WATCH;
7 |
8 | export default {
9 | input: 'src/main.js',
10 | output: {
11 | sourcemap: true,
12 | format: 'iife',
13 | file: 'public/bundle.js',
14 | name: 'app'
15 | },
16 | plugins: [
17 | svelte({
18 | // enable run-time checks when not in production
19 | dev: !production,
20 |
21 | customElement: true
22 | }),
23 |
24 | // If you have external dependencies installed from
25 | // npm, you'll most likely need these plugins. In
26 | // some cases you'll need additional configuration —
27 | // consult the documentation for details:
28 | // https://github.com/rollup/rollup-plugin-commonjs
29 | resolve(),
30 | commonjs(),
31 |
32 | production && terser()
33 | ]
34 | };
--------------------------------------------------------------------------------
/src/App.html:
--------------------------------------------------------------------------------
1 | Hello {name}!
2 |
3 | Try 'inspect element' — the Box and Counter components have been converted to custom elements with shadow DOM and scoped styles.
4 |
5 |
6 | The button has been clicked {count} times
7 |
8 |
9 |
10 |
11 |
24 |
25 |
--------------------------------------------------------------------------------
/src/Box.html:
--------------------------------------------------------------------------------
1 | This is a custom element with slotted shadow DOM content
2 |
3 |
4 |
18 |
19 |
--------------------------------------------------------------------------------
/src/Counter.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
24 |
25 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import './App.html';
2 |
3 | document.body.innerHTML = '';
--------------------------------------------------------------------------------