svelte-happy-demo

A playground for developing interactive SVG graphics, as a Svelte component.

Aims:

• apply the Toolbook/Flash programming model to modern web apps
  •  vector graphics with scripts and cascading events
• allow working with SVG assets in separate files (editable)
• ... (other aims still foggy)

HTML 5 SVG page (w3schools) mentions that SVG were "not suited for game applications". One of the purpose of this demo is to see, how far that holds true, in 2019-20.

Requirements

• npm

Getting started

$ npm install

If you see errors, check out the Troubleshooting section.

$ npm run dev

  Your application is ready~! 🚀

  - Local:      http://localhost:5000

...
[2019-11-24 19:42:02] waiting for changes...

Open http://localhost:5000.

Tests

tbd. Tests are intended, using Mocha, Puppeteer or similar (what is this C... fellow?).

Developing

While you're running the npm run dev, changes to the code are reflected in the browser.

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.

Using

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.

To use the component in your other (npm) project, use:

Here, just once:

$ npm link

In the using project:

$ cd <your-project>
$ npm link svelte-circles-demo	# the name in 'package.json'

This should provide you the component in the other project.

Warning: not tried!

See app/App.svelte for a sample.

Troubleshooting

macOS Catalina

If you're on macOS 10.15 and get a bunch of errors about node-gyp, see here.

Essentially:

$ sudo rm -rf $(xcode-select -print-path)
$ xcode-select --install
$ /usr/sbin/pkgutil --packages | grep CLTools   # should list some files

Then try again npm install.

References

• Thanks to Eugenkiss 7 Tasks for the original "Circle Drawer" code, found via Svelte Examples

• rollup-plugin-svelte/README

  Read especially this section for knowledge on exporting/importing Svelte components, via npm.

• lukeed/svelte-demo used as a template for the app part (demo/testbed)

• Understanding npm-link (Medium; Oct 2018)