Merge pull request #107 from Tal500/sveltekit

Sveltekit mega change, for better robustness

Author: thecodejack

.gitignore

@@ -1,3 +1,5 @@
 node_modules
 dist
 storybook-static
+.svelte-kit
+package

.npmrc

@@ -0,0 +1 @@
+auto-install-peers=true # TODO: Find the right peer deps instead of doing it automatically

.storybook/main.cjs

@@ -0,0 +1,35 @@
+// based on https://allandeutsch.com/notes/sveltekit-storybook-setup/
+
+const fs = require('fs');
+const util = require('util');
+const readFile = (fileName) => util.promisify(fs.readFile)(fileName, 'utf8');
+
+const path = require('path');
+
+module.exports = {
+  stories: ["../stories/**/*.stories.js"],
+  addons: [
+    "@storybook/addon-actions",
+    "@storybook/addon-links",
+    "@storybook/addon-storysource",
+    "@storybook/addon-notes/register",
+    "@storybook/addon-essentials",
+    "@storybook/addon-svelte-csf"
+  ],
+  "framework": "@storybook/svelte",
+  "core": {
+    "builder": "@storybook/builder-vite"
+  },
+  async viteFinal(config, { configType: _configType }) {
+    config.resolve.alias = {
+      $lib: path.resolve('./src/lib'),
+    };
+
+    config.define = {
+      ...(config.define || {}),
+      "process.env.__readme__": JSON.stringify(await readFile('README.md'))
+    };
+
+    return config;
+  },
+};

.storybook/main.js

@@ -81,6 +81,49 @@ yarn add svelte-file-dropzone
 
 [Click here](https://github.com/thecodejack/svelte-file-dropzone/tree/master/stories/views) to view stories implementation
 
+## Build
+
+### Setup
+
+To build from the source code, you'll need to use `pnpm` (if not installed already, install by `npm install -g pnpm`). To setup the environment, run:
+
+```bash
+pnpm install
+pnpm sync
+```
+
+### Build
+
+To build the library, simply run `pnpm package`. The compiled output will be in the directory `package`.
+
+### Storybook
+
+You may view and build storybook examples of this library.
+
+To see then you can run a storybook development server by `pnpm storybook`. Runing a development server is much quicker and more responsive to changes comparing to a full build.
+
+To generate the static HTML of the storybook (i.e. full build, e.g. for hosting in static server), run `pnpm build-storybook`. You may launch a local static HTML server by `pnpm sirv-storybook`.
+
+Note: On some node environments, you might see the following error:
+
+```
+node:internal/crypto/hash:67
+  this[kHandle] = new _Hash(algorithm, xofLen);
+                  ^
+
+Error: error:0308010C:digital envelope routines::unsupported
+```
+
+To overcome this, set manually in console the environment variable `NODE_OPTIONS=--openssl-legacy-provider`. See https://stackoverflow.com/a/69746937/2968864 for details.
+
+### SvelteKit Example
+
+We also have a modified version of the official SvelteKit basic example, for showing how to use it on SvelteKit.
+
+To explore it, start a Vite development server by `pnpm dev`.
+
+If you wish to have a full build of the SvelteKit example project, run `pnpm build`. To see the results, run `pnpm preview`.
+
 ## Credits
 
 Component is reimplementation [react-dropzone](https://github.com/react-dropzone/react-dropzone). Complete credit goes to author and contributors of [react-dropzone](https://github.com/react-dropzone/react-dropzone).