Skip to content

Commit 7ba28e7

Browse files
Tal500Tal500
committed
use sveltekit and vite for packaging and building, fix stroybook structure, and change dir structure for lib packaging
Still need to have better typing and to put the sveltekit example in the routes.
1 parent 3dc91ec commit 7ba28e7

37 files changed

+3545
-1063
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
node_modules
22
dist
33
storybook-static
4+
.svelte-kit

‎.storybook/main.cjs‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
// based on https://allandeutsch.com/notes/sveltekit-storybook-setup/
2+
3+
const fs = require('fs');
4+
const util = require('util');
5+
const readFile = (fileName) => util.promisify(fs.readFile)(fileName, 'utf8');
6+
7+
const path = require('path');
8+
9+
// based on https://stackoverflow.com/a/22466191/2968864
10+
/** @param {string} str */
11+
const toJSString = (str) => "'" + str.replace(/[\\$'"`]/g, "\\$&").split(/\r\n|\n/).join('\\n') + "'";
12+
13+
module.exports = {
14+
stories: ["../stories/**/*.stories.js"],
15+
addons: [
16+
"@storybook/addon-actions",
17+
"@storybook/addon-links",
18+
"@storybook/addon-storysource",
19+
"@storybook/addon-notes/register",
20+
"@storybook/addon-essentials",
21+
"@storybook/addon-svelte-csf"
22+
],
23+
"framework": "@storybook/svelte",
24+
"core": {
25+
"builder": "@storybook/builder-vite"
26+
},
27+
async viteFinal(config, { configType: _configType }) {
28+
config.resolve.alias = {
29+
$components: path.resolve('./src/components'),
30+
$routes: path.resolve('./src/routes'),
31+
$lib: path.resolve('./src/lib'),
32+
};
33+
34+
config.define = {
35+
...(config.define || {}),
36+
__readme__: toJSString(await readFile('README.md'))
37+
};
38+
39+
return config;
40+
},
41+
};

‎.storybook/main.js‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎README.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,30 @@ yarn add svelte-file-dropzone
8181

8282
[Click here](https://github.com/thecodejack/svelte-file-dropzone/tree/master/stories/views) to view stories implementation
8383

84+
## Build
85+
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:
86+
87+
```bash
88+
pnpm install
89+
pnpm sync
90+
```
91+
92+
Then, you may launch the storybook development server by `pnpm storybook`.
93+
94+
To generate the static HTML of the storybook, run `pnpm build-storybook`. You may launch a static HTML server and browse the output by `pnpm sirv`.
95+
96+
On some node environments, you might see the following error:
97+
98+
```
99+
node:internal/crypto/hash:67
100+
this[kHandle] = new _Hash(algorithm, xofLen);
101+
^
102+
103+
Error: error:0308010C:digital envelope routines::unsupported
104+
```
105+
106+
To overcome this, set manually in console the environment variable `NODE_OPTIONS=--openssl-legacy-provider`. See https://stackoverflow.com/a/69746937/2968864 for details.
107+
84108
## Credits
85109

86110
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).

‎package.json‎

Lines changed: 31 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,56 @@
11
{
22
"name": "svelte-file-dropzone",
3+
"type": "module",
34
"version": "1.0.0",
45
"description": "Svelte component for fileupload and file dropzone",
56
"svelte": "src/components/Dropzone.svelte",
67
"module": "dist/index.mjs",
78
"main": "dist/index.js",
89
"scripts": {
9-
"build": "rollup -c",
10-
"prepublishOnly": "npm run build",
10+
"sync": "svelte-kit sync",
11+
"package": "svelte-kit package",
1112
"test": "echo \"Error: no test specified\" && exit 1",
13+
"check": "svelte-check --tsconfig ./tsconfig.json",
1214
"storybook": "start-storybook -p 6006",
13-
"build-storybook": "build-storybook"
15+
"build-storybook": "build-storybook",
16+
"sirv": "sirv storybook-static"
1417
},
1518
"repository": {
1619
"url": "https://github.com/thecodejack/svelte-file-dropzone"
1720
},
1821
"author": "thecodejack",
1922
"license": "MIT",
2023
"dependencies": {
21-
"file-selector": "^0.2.4"
24+
"file-selector": "0.6"
2225
},
2326
"devDependencies": {
24-
"@babel/core": "7.18.10",
25-
"@rollup/plugin-commonjs": "22.0.2",
26-
"@rollup/plugin-node-resolve": "13.3.0",
27+
"@mdx-js/react": "1",
2728
"@storybook/addon-actions": "6.5.10",
29+
"@storybook/addon-backgrounds": "^6.5.10",
30+
"@storybook/addon-docs": "^6.5.10",
31+
"@storybook/addon-essentials": "^6.5.10",
2832
"@storybook/addon-links": "6.5.10",
33+
"@storybook/addon-measure": "^6.5.10",
2934
"@storybook/addon-notes": "5.3.21",
35+
"@storybook/addon-outline": "^6.5.10",
3036
"@storybook/addon-storysource": "6.5.10",
37+
"@storybook/addon-svelte-csf": "^2.0.6",
3138
"@storybook/addons": "6.5.10",
39+
"@storybook/builder-vite": "^0.2.2",
40+
"@storybook/client-api": "^6.5.10",
41+
"@storybook/client-logger": "^6.5.10",
3242
"@storybook/svelte": "6.5.10",
33-
"babel-loader": "8.2.5",
34-
"rollup": "2.77.2",
35-
"rollup-plugin-svelte": "7.1.0",
43+
"@sveltejs/adapter-auto": "1.0.0-next.64",
44+
"@sveltejs/kit": "1.0.0-next.405",
45+
"react": "16.x",
46+
"react-dom": "16.x",
3647
"svelte": "3.49.0",
37-
"svelte-loader": "3.1.3"
48+
"svelte-check": "^2.8.0",
49+
"svelte-preprocess": "^4.10.7",
50+
"svelte2tsx": "^0.5.13",
51+
"tslib": "^2.4.0",
52+
"typescript": "^4.7.4",
53+
"vite": "^3.0.4"
3854
},
3955
"keywords": [
4056
"svelte",
@@ -49,5 +65,8 @@
4965
"files": [
5066
"src",
5167
"dist"
52-
]
68+
],
69+
"optionalDependencies": {
70+
"sirv-cli": "^2.0.2"
71+
}
5372
}

‎package/.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules
2+
dist
3+
storybook-static
4+
.svelte-kit

‎package/README.md‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
# svelte-file-dropzone
2+
3+
[![NPM](https://img.shields.io/npm/v/svelte-file-dropzone.svg)](https://www.npmjs.com/package/svelte-file-dropzone)
4+
[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/svelte-file-dropzone.svg)](https://www.npmjs.com/package/svelte-file-dropzone)
5+
6+
SvelteJS component for file upload and dropzone.The component is Svelte implementation of [react-dropzone](https://github.com/react-dropzone/react-dropzone).
7+
8+
## Demo
9+
10+
[Click here for Storybook link](https://svelte-file-dropzone.netlify.app/?path=/info/examples--basic-dropzone)
11+
12+
## Installation
13+
14+
```
15+
npm install svelte-file-dropzone
16+
17+
or
18+
19+
yarn add svelte-file-dropzone
20+
```
21+
22+
## Usage
23+
24+
```svelte
25+
<script>
26+
import Dropzone from "svelte-file-dropzone";
27+
28+
let files = {
29+
accepted: [],
30+
rejected: []
31+
};
32+
33+
function handleFilesSelect(e) {
34+
const { acceptedFiles, fileRejections } = e.detail;
35+
files.accepted = [...files.accepted, ...acceptedFiles];
36+
files.rejected = [...files.rejected, ...fileRejections];
37+
}
38+
</script>
39+
40+
<Dropzone on:drop={handleFilesSelect} />
41+
<ol>
42+
{#each files.accepted as item}
43+
<li>{item.name}</li>
44+
{/each}
45+
</ol>
46+
```
47+
48+
## API
49+
50+
### Props
51+
52+
| Prop Name | Description | Default Value |
53+
| --------------------- | ---------------------------------------------------------------------------------------- | ------------- |
54+
| accept | Set accepted file types. See https://github.com/okonet/attr-accept for more information. | undefined |
55+
| disabled | | false |
56+
| maxSize | | Infinity |
57+
| minSize | | 0 |
58+
| multiple | if true, multiple files can be selected at once | true |
59+
| preventDropOnDocument | 1231 | true |
60+
| noClick | disable click events | false |
61+
| noKeyboard | disable keyboard events | false |
62+
| noDrag | disable drag events | false |
63+
| containerClasses | custom container classes | "" |
64+
| containerStyles | custom inline container styles | "" |
65+
| disableDefaultStyles | don't apply default styles to container | false |
66+
67+
### Events
68+
69+
| Event Name | Description | `event.detail` info |
70+
| ---------------- | ----------- | -------------------------------------- |
71+
| dragenter | | `{dragEvent: event}` |
72+
| dragover | | `{dragEvent: event}` |
73+
| dragleave | | `{dragEvent: event}` |
74+
| drop | | `{acceptedFiles,fileRejections,event}` |
75+
| filedropped | | `{event}` |
76+
| droprejected | | `{fileRejections,event}` |
77+
| dropaccepted | | `{acceptedFiles,event}` |
78+
| filedialogcancel | | |
79+
80+
### Examples
81+
82+
[Click here](https://github.com/thecodejack/svelte-file-dropzone/tree/master/stories/views) to view stories implementation
83+
84+
## Build
85+
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:
86+
87+
```bash
88+
pnpm install
89+
pnpm sync
90+
```
91+
92+
Then, you may launch the storybook development server by `pnpm storybook`.
93+
94+
To generate the static HTML of the storybook, run `pnpm build-storybook`. You may launch a static HTML server and browse the output by `pnpm sirv`.
95+
96+
On some node environments, you might see the following error:
97+
98+
```
99+
node:internal/crypto/hash:67
100+
this[kHandle] = new _Hash(algorithm, xofLen);
101+
^
102+
103+
Error: error:0308010C:digital envelope routines::unsupported
104+
```
105+
106+
To overcome this, set manually in console the environment variable `NODE_OPTIONS=--openssl-legacy-provider`. See https://stackoverflow.com/a/69746937/2968864 for details.
107+
108+
## Credits
109+
110+
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).
111+
112+
## License
113+
114+
MIT

‎package/index.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import DropZone from "./internal/components/Dropzone.svelte";
2+
export default DropZone;

‎package/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
// This file exists for Stories
2+
import DropZone from "./internal/components/Dropzone.svelte";
3+
export default DropZone;

0 commit comments

Comments
 (0)