Skip to content

Commit 5a91c12

Browse files
rburnham-defrburnham-def
committed
Initial setup of working project
1 parent a141e0c commit 5a91c12

25 files changed

+548
-1
lines changed

‎.babelrc

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"presets": [
3+
["@babel/preset-typescript", { "targets": "last 2 versions, ie 11"}]
4+
]
5+
}

‎.gitignore

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.DS_Store
2+
node_modules
3+
public/bundle.*
4+
package-lock.json
5+
yarn.lock
6+
.idea/
7+
8+
build/

‎.storybook/addons.js

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import '@storybook/addon-actions/register';
2+
import '@storybook/addon-links/register';

‎.storybook/config.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { configure } from '@storybook/svelte';
2+
3+
// automatically import all files ending in *.stories.js
4+
configure(require.context('../stories', true, /\.stories\.[jt]s$/), module);

‎.storybook/presets.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = ["@storybook/preset-typescript","@storybook/preset-scss"];

‎.storybook/webpack.config.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
const merge = require('webpack-merge');
2+
const {CheckerPlugin} = require('awesome-typescript-loader');
3+
4+
5+
module.exports = ({config, mode}) => {
6+
// console.dir(config, { depth: null });
7+
let mergedConfig = merge.smart(config, {
8+
module:
9+
{
10+
rules: [
11+
{
12+
test: /\.(svelte|html)$/,
13+
loader: 'svelte-loader',
14+
options: {
15+
preprocess: require('svelte-preprocess')({ /* options */})
16+
}
17+
},
18+
]
19+
},
20+
});
21+
mergedConfig.plugins.push(new CheckerPlugin());
22+
// console.dir(mergedConfig, {depth: null});
23+
return mergedConfig;
24+
};

‎README.md

+78-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,78 @@
1-
svelte-typescript-sass-template
1+
# Svelte, Typescript, SASS, Storybook, Webpack template
2+
3+
This project template was based on the [Svelte](https://svelte.dev) webpack template. It lives at https://github.com/sveltejs/template-webpack.
4+
5+
It was modified to include
6+
- Typescript
7+
- Sass
8+
- Storybook
9+
10+
To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):
11+
12+
```bash
13+
npx degit sveltejs/template-webpack svelte-app
14+
cd svelte-app
15+
```
16+
17+
*Note that you will need to have [Node.js](https://nodejs.org) installed.*
18+
19+
20+
## Get started
21+
22+
Install the dependencies...
23+
24+
```bash
25+
cd svelte-app
26+
npm install
27+
```
28+
29+
...then start webpack:
30+
31+
```bash
32+
npm run dev
33+
```
34+
35+
Navigate to [localhost:4000](http://localhost:4000). You should see your app running. Edit a component file in `src`, save it, and the page should reload with your changes.
36+
37+
### Limitations
38+
Typescript and Svelte support are added to `.svelte` files using the via the `svelte-preprocessor`.
39+
It requires using the `lang` or `type` attributes on the `style` and `script` elements.
40+
Within the script block this should work but inside the html section support varies based on the IDE you use.
41+
42+
Importing separate Typescript and Sass files should work fine.
43+
44+
## Storybook
45+
[Storybook](https://storybook.js.org/) has been setup to allow designing components in isolation. There are many Story book [addons](https://storybook.js.org/addons/) that can be added to extend the features
46+
47+
Run storybook with
48+
49+
```bash
50+
npm run storybook
51+
```
52+
Navigate to [localhost:4061](http://localhost:4060). You should see your component stories.
53+
54+
### Stories
55+
Storybook is configured to load stories from the `stories` folder that end in `.stories.js` or `.stories.ts`
56+
57+
This project shows 2 button examples, one button uses scss within a svelte file, the other imports a scss file using the src attribute
58+
59+
### Removing Storybook
60+
If you don't want storybook remove the following
61+
62+
**Folders**
63+
- `.storybook`
64+
- `stories`
65+
66+
**NPM Packages**
67+
```
68+
"@storybook/addon-actions": "^5.2.4",
69+
"@storybook/addon-links": "^5.2.4",
70+
"@storybook/addons": "^5.2.4",
71+
"@storybook/preset-scss": "^1.0.2",
72+
"@storybook/preset-typescript": "^1.1.0",
73+
"@storybook/svelte": "^5.2.4",
74+
"react-docgen-typescript-loader": "^3.3.0",
75+
```
76+
Note - `react-docgen-typescript-loader` is a dependency of the @storybook/preset-typescript and will be removed in a future version
77+
78+
Lastly remove the `storybook` script from your `packages.json` `scripts` section

‎package.json

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"name": "svelte-app",
3+
"version": "1.0.0",
4+
"devDependencies": {
5+
"@babel/cli": "^7.6.4",
6+
"@babel/core": "^7.6.4",
7+
"@babel/preset-typescript": "^7.6.0",
8+
"@pyoner/svelte-types": "^3.4.4-2",
9+
"@storybook/addon-actions": "^5.2.4",
10+
"@storybook/addon-links": "^5.2.4",
11+
"@storybook/addons": "^5.2.4",
12+
"@storybook/preset-scss": "^1.0.2",
13+
"@storybook/preset-typescript": "^1.1.0",
14+
"@storybook/svelte": "^5.2.4",
15+
"awesome-typescript-loader": "^5.2.1",
16+
"babel-loader": "^8.0.6",
17+
"clean-webpack-plugin": "^3.0.0",
18+
"copy-webpack-plugin": "^5.0.4",
19+
"css-loader": "^2.1.1",
20+
"mini-css-extract-plugin": "^0.6.0",
21+
"node-sass": "^4.12.0",
22+
"react-docgen-typescript-loader": "^3.3.0",
23+
"sass-loader": "^8.0.0",
24+
"style-loader": "^0.23.1",
25+
"svelte": "^3.12.1",
26+
"svelte-loader": "^2.13.6",
27+
"svelte-preprocess": "^3.1.2",
28+
"ts-loader": "^6.2.1",
29+
"typescript": "^3.6.4",
30+
"webpack": "^4.30.0",
31+
"webpack-cli": "^3.3.0",
32+
"webpack-dev-server": "^3.3.1",
33+
"webpack-merge": "^4.2.2"
34+
},
35+
"scripts": {
36+
"build": "webpack --config webpack.prod.js",
37+
"dev": "webpack-dev-server --open --config webpack.dev.js",
38+
"storybook": "start-storybook -p 4061"
39+
}
40+
}

‎public/favicon.png

3.05 KB
Loading

‎public/global.css

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
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+
}
14+
15+
a {
16+
color: rgb(0,100,200);
17+
text-decoration: none;
18+
}
19+
20+
a:hover {
21+
text-decoration: underline;
22+
}
23+
24+
a:visited {
25+
color: rgb(0,80,160);
26+
}
27+
28+
label {
29+
display: block;
30+
}
31+
32+
input, button, select, textarea {
33+
font-family: inherit;
34+
font-size: inherit;
35+
padding: 0.4em;
36+
margin: 0 0 0.5em 0;
37+
box-sizing: border-box;
38+
border: 1px solid #ccc;
39+
border-radius: 2px;
40+
}
41+
42+
input:disabled {
43+
color: #ccc;
44+
}
45+
46+
input[type="range"] {
47+
height: 0;
48+
}
49+
50+
button {
51+
background-color: #f4f4f4;
52+
outline: none;
53+
}
54+
55+
button:active {
56+
background-color: #ddd;
57+
}
58+
59+
button:focus {
60+
border-color: #666;
61+
}

‎public/index.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset='utf8'>
5+
<meta name='viewport' content='width=device-width'>
6+
7+
<title>Svelte app</title>
8+
9+
<link rel='icon' type='image/png' href='favicon.png'>
10+
<link rel='stylesheet' href='global.css'>
11+
<link rel='stylesheet' href='bundle.css'>
12+
</head>
13+
14+
<body>
15+
<script src='bundle.js'></script>
16+
</body>
17+
</html>

‎src/App.svelte

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script>
2+
import Button from "./components/button/Button.svelte";
3+
4+
export let name;
5+
</script>
6+
7+
<style type="text/scss">
8+
h1 {
9+
color: purple;
10+
}
11+
</style>
12+
13+
<h1>Hello {name}!</h1>
14+
<Button text="Hello"/>
15+

‎src/components/button/Button.svelte

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
2+
<button class="warn" on:click={onClick}>
3+
{`${text} ${label}`}
4+
</button>
5+
6+
<style type="text/scss">
7+
@import "./../../styles/defaults";
8+
9+
button.warn {
10+
background-color: $primary-colour2;
11+
color: $darkest;
12+
}
13+
</style>
14+
15+
<script>
16+
import { createEventDispatcher } from 'svelte';
17+
import { label } from './ButtonData'
18+
console.log('Label:', label);
19+
export let text = '';
20+
21+
const dispatch = createEventDispatcher();
22+
23+
function onClick(event) {
24+
dispatch('click', event)
25+
}
26+
</script>

‎src/components/button/Button2.scss

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@import '../../styles/defaults';
2+
3+
button.primary {
4+
background-color: $primary-colour1;
5+
color: $lightest;
6+
}

‎src/components/button/Button2.svelte

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
2+
<button class="primary" on:click={onClick}>
3+
{`${text} ${label}`}
4+
</button>
5+
6+
<style src="./Button2.scss"></style>
7+
8+
<script>
9+
import { createEventDispatcher } from 'svelte';
10+
import { label } from './ButtonData'
11+
console.log('Label:', label);
12+
export let text = '';
13+
14+
const dispatch = createEventDispatcher();
15+
16+
function onClick(event) {
17+
dispatch('click', event)
18+
}
19+
</script>

‎src/components/button/ButtonData.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
2+
export let label : string = 'World';

‎src/main.ts

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import App from './App.svelte';
2+
3+
const app = new App({
4+
target: document.body,
5+
props: {
6+
name: 'world'
7+
}
8+
});
9+
10+
declare global {
11+
interface Window { app: any; }
12+
}
13+
window.app = app;
14+
export default app;

‎src/styles/defaults.scss

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/* You can add global styles to this file, and also import other style files */
2+
@import "variables";
3+
4+
button {
5+
background: $primary-colour1;
6+
color: $lightest;
7+
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
8+
box-sizing: border-box;
9+
position: relative;
10+
-webkit-user-select: none;
11+
-moz-user-select: none;
12+
-ms-user-select: none;
13+
user-select: none;
14+
cursor: pointer;
15+
outline: 0;
16+
border: none;
17+
-webkit-tap-highlight-color: transparent;
18+
display: inline-block;
19+
white-space: nowrap;
20+
text-decoration: none;
21+
vertical-align: baseline;
22+
text-align: center;
23+
margin: 0;
24+
min-width: 64px;
25+
line-height: 36px;
26+
padding: 0 0.25rem;
27+
border-radius: 4px;
28+
overflow: visible;
29+
transform: translate3d(0,0,0);
30+
transition: background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);
31+
}
32+
33+
button:hover {
34+
transition: background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);
35+
background: lighten($primary-colour1, 15%);
36+
}

‎src/styles/variables.scss

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
//Global SASS variables
2+
$lightest: #fff;
3+
$darkest: #000;
4+
5+
$primary-colour1: #296ac8;
6+
$primary-colour2: #ff3807;

‎stories/button.stories.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { action } from '@storybook/addon-actions';
2+
3+
import Button from '../src/components/button/Button.svelte';
4+
5+
export default {
6+
title: 'Button',
7+
};
8+
9+
export const withSassStyleTag = () => ({
10+
Component: Button,
11+
props: { text: 'Hello' },
12+
on: { click: action('clicked') },
13+
});

0 commit comments

Comments
 (0)