Skip to content

Commit 41e951d

Browse files
akauppiakauppi
committed
initial
0 parents  commit 41e951d

15 files changed

+439
-0
lines changed

‎.gitignore

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/node_modules/
2+
/dist/
3+
4+
/app/public/*.css
5+
/app/public/*.css.map
6+
/app/public/*.js
7+
/app/public/*.js.map

‎.images/screenshot.png

32.6 KB
Loading

‎.npmignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/app/

‎.npmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
package-lock=false

‎CHANGELOG.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Changelog
2+
3+
## 27-Nov-19
4+
5+
- Initial commit, based on work on 'svelte-spinner' and the cirles example.

‎CONTRIBUTE.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Contribute
2+
3+
Thanks for wanting to help!!! 😊👏
4+
5+
You can `git grep` the repo for the tags `#help` and `#advice`. Those mark places where outside opinion is particularily asked for.
6+
7+
---
8+
9+
You can get in touch with the author by creating an Issue. If we get more traffic, let's check about creating a Gitter or some other meaningful communications channel.

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2019 Asko Kauppi
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+113
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
# svelte-circles
2+
3+
A playground for developing _interactive_ SVG graphics, as a Svelte component.
4+
5+
Aims:
6+
7+
- [ ] apply the Toolbook/Flash programming model to modern web apps
8+
- [ ] vector graphics with scripts and cascading events
9+
- [ ] allow working with SVG assets in separate files (editable)
10+
- [ ] ... (other aims still foggy)
11+
12+
13+
## Requirements
14+
15+
- npm
16+
17+
## Getting started
18+
19+
```
20+
$ npm install
21+
```
22+
23+
*If you see errors, check out the [Troubleshooting](#troubleshooting) section.*
24+
25+
```
26+
$ npm run dev
27+
28+
Your application is ready~! 🚀
29+
30+
- Local: http://localhost:5000
31+
32+
...
33+
[2019-11-24 19:42:02] waiting for changes...
34+
```
35+
36+
Open [http://localhost:5000](http://localhost:5000).
37+
38+
39+
>![](.images/screenshot.png)
40+
41+
42+
## Tests
43+
44+
<font color=red>tbd. Tests are intended, using Mocha, Puppeteer or similar (what is this C... fellow?).</font>
45+
46+
47+
## Developing
48+
49+
While you're running the `npm run dev`, changes to the code are reflected in the browser.
50+
51+
>You will need to hit 'refresh' in the browser, though. Remains open whether we want the browser to automatically refresh - it may also be a unwanted.
52+
53+
54+
## Using
55+
56+
>This module is not currently published to the online `npm` repo. This is because it's a proof-of-concept and not really useful as from-the-shelf. If this changes, we may rethink polishing and publishing.
57+
58+
To use the component in your other (npm) project, use:
59+
60+
Here, just once:
61+
62+
```
63+
$ npm link
64+
```
65+
66+
In the using project:
67+
68+
```
69+
$ cd <your-project>
70+
$ npm link svelte-circles-demo # the name in 'package.json'
71+
```
72+
73+
This should provide you the component in the other project.
74+
75+
*<font color=red>Warning: not tried!</font>*
76+
77+
See [app/App.svelte](app/App.svelte) for a sample.
78+
79+
<!-- disabled (enable if there are properties)
80+
### Properties
81+
82+
| | Default Value | Description
83+
|---|---|---
84+
85+
-->
86+
87+
88+
## Troubleshooting
89+
90+
### macOS Catalina
91+
92+
If you're on macOS 10.15 and get a bunch of errors about `node-gyp`, see [here](https://github.com/nodejs/node-gyp/issues/1927#issuecomment-549349352).
93+
94+
Essentially:
95+
96+
>```
97+
>$ sudo rm -rf $(xcode-select -print-path)
98+
>$ xcode-select --install
99+
>$ /usr/sbin/pkgutil --packages | grep CLTools # should list some files
100+
>```
101+
102+
Then try again `npm install`.
103+
104+
## References
105+
106+
- Thanks to Eugenkiss [7 Tasks](https://eugenkiss.github.io/7guis/tasks#circle) for the original "Circle Drawer" code, found via [Svelte Examples](https://svelte.dev/examples#7guis-circles)
107+
108+
- [rollup-plugin-svelte/README](https://github.com/rollup/rollup-plugin-svelte)
109+
110+
Read especially [this section](https://github.com/rollup/rollup-plugin-svelte#pkgsvelte) for knowledge on exporting/importing Svelte components, via npm.
111+
112+
- [lukeed/svelte-demo](https://github.com/lukeed/svelte-demo) used as a template for the `app` part (demo/testbed)
113+

‎TODO.md

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# Todo
2+
3+
- [ ] Tests with mocha
4+
- [ ] <strike>publishing</strike>
5+
- [ ] peer feedback from some seasoned Svelte 3 users
6+
7+
8+
## Help requests
9+
10+
- [ ] Should we have a `.files` field in `package.json`? What's it used for?
11+
12+

‎app/App.svelte

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<script>
2+
// Use this for npm-published module
3+
//import SVGCircles from 'svelte-circles';
4+
5+
// Use this for local developed code
6+
import SVGCircles from '../src/index.svelte';
7+
</script>
8+
9+
<h1>Svelte Circles</h1>
10+
11+
<hr />
12+
asdasds
13+
14+
<SVGCircles />
15+
16+
<hr />
17+

‎app/index.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import App from './App.svelte';
2+
3+
new App({ target: document.getElementById('app') });

‎app/public/index.html

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
8+
<title>Svelte Spinner Demo</title>
9+
10+
<style>
11+
label, input {
12+
display: block;
13+
margin: 0 auto;
14+
}
15+
div {
16+
text-align: center;
17+
margin-bottom: 20px;
18+
}
19+
</style>
20+
<link rel="stylesheet" href="/bundle.css">
21+
</head>
22+
23+
<body>
24+
<div id="app"></div>
25+
<!-- tbd. wasn't able to get ESM modules working
26+
<script type="module" src="/esm.js"></script>
27+
-->
28+
<script src="/bundle.js"></script>
29+
</body>
30+
</html>

‎package.json

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "svelte-circles-demo",
3+
"version": "0.0.0",
4+
"description": "Playground for developing interactive SVG, as a Svelte component",
5+
"svelte": "src/index.svelte",
6+
"module": "dist/index.mjs",
7+
"main": "dist/index.js",
8+
"author": "Asko Kauppi",
9+
"license": "MIT",
10+
"private": true,
11+
"repository": {
12+
"type": "git",
13+
"url": "https://github.com/akauppi/svelte-circles-demo"
14+
},
15+
"scripts": {
16+
"build": "rollup -c",
17+
"dev": "run-p dev:start dev:watch",
18+
"dev:watch": "rollup -c -w",
19+
"dev:start": "sirv app/public --dev --single",
20+
"clean": "(cd app/public && rm -f *.js *.css *.map)",
21+
"prepublishOnly": "build",
22+
"test": "mocha # tbd.",
23+
"pretest": "build"
24+
},
25+
"devDependencies": {
26+
"npm-run-all": "^4.1.5",
27+
"rollup": "^1.27.4",
28+
"rollup-plugin-commonjs": "^10.1.0",
29+
"rollup-plugin-node-resolve": "^5.2.0",
30+
"rollup-plugin-svelte": "^5.1.1",
31+
"rollup-plugin-terser": "^5.1.2",
32+
"sirv-cli": "^0.4.5",
33+
"svelte": "^3.15.0"
34+
}
35+
}

‎rollup.config.js

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
// Rollup config for production
2+
//
3+
import svelte from 'rollup-plugin-svelte';
4+
import resolve from 'rollup-plugin-node-resolve';
5+
import commonjs from 'rollup-plugin-commonjs';
6+
import { terser } from 'rollup-plugin-terser';
7+
import pkg from './package.json';
8+
9+
const input = 'src/index.svelte';
10+
11+
const production = !process.env.ROLLUP_WATCH;
12+
13+
// Note: Normally, Rollup suggest providing multiple targets with same input (as we have) as an 'output' array,
14+
// but that doesn't allow for different 'external' and (input) 'plugins' fields. This seems safer. AK/24-Nov-19
15+
16+
export default [
17+
// ES6 + ES modules (future ready) -> https://caniuse.com/#feat=es6-module
18+
{
19+
input,
20+
output: { file: pkg.module, format: 'es', sourcemap: true },
21+
external: ['svelte/internal'],
22+
plugins: [
23+
svelte({ dev: !production }), // enable runtime checks
24+
production && terser() // minify
25+
]
26+
},
27+
// ES5 + UMD (modern day) - only IE 6..11 would need this
28+
{
29+
input,
30+
output: { file: pkg.main, format: 'umd', name: 'Demo' },
31+
plugins: [
32+
svelte(),
33+
resolve()
34+
]
35+
},
36+
37+
// Demo app / test bench
38+
{
39+
input: "app/index.js",
40+
output: {
41+
file: "app/public/bundle.js",
42+
format: "iife", // Q: is 'iife' a good target? #advice
43+
sourcemap: true
44+
},
45+
plugins: [
46+
svelte({ dev: true, css: css => css.write('app/public/bundle.css') }),
47+
resolve({
48+
jsnext: true, // tbd. why? (from svelte-spinner example) #advice
49+
main: true, // tbd. why? (-''-) #advice
50+
browser: true // tbd. why? (-''-) #advice
51+
}),
52+
commonjs() // tbd. is this neeeded and why?
53+
],
54+
watch: {
55+
clearScreen: false
56+
}
57+
}
58+
];

0 commit comments

Comments
 (0)