Skip to content

Commit 2fe4a0a

Browse files
rburnham-defrburnham-def
committed
Added support for aliases
1 parent d9f9be3 commit 2fe4a0a

File tree

10 files changed

+122
-59
lines changed

10 files changed

+122
-59
lines changed

‎.storybook/webpack.config.js

+9-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1+
const {aliases, scssAliases} = require("../webpack.parts");
12
const merge = require('webpack-merge');
23
const {CheckerPlugin} = require('awesome-typescript-loader');
3-
const path = require('path');
44

55

66
module.exports = ({config, mode}) => {
@@ -13,13 +13,19 @@ module.exports = ({config, mode}) => {
1313
test: /\.(svelte|html)$/,
1414
loader: 'svelte-loader',
1515
options: {
16-
preprocess: require('svelte-preprocess')({ /* options */})
16+
preprocess: require('svelte-preprocess')({
17+
scss: {
18+
importer: [
19+
scssAliases(aliases),
20+
],
21+
}
22+
})
1723
}
1824
},
1925
]
2026
},
2127
});
22-
mergedConfig.resolve.alias['@styles'] = path.resolve(__dirname, '../src/styles/');
28+
mergedConfig.resolve.alias = {...mergedConfig.resolve.alias, ...aliases};
2329
mergedConfig.plugins.push(new CheckerPlugin());
2430
//console.dir(mergedConfig, {depth: null});
2531
return mergedConfig;

‎README.md

+10-2
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,18 @@ npm run dev
3535
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.
3636

3737
### Limitations
38-
Typescript and Svelte support are added to `.svelte` files using the via the `svelte-preprocessor`.
38+
#### Typescript/Sass
39+
Typescript and Sass support for `.svelte` files are added via the `svelte-preprocessor`.
3940
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+
Within the script block this should work but inside `.svelte` files support varies based on the IDE you use. It may build but your IDE still shows errors
4142

4243
Importing separate Typescript and Sass files should work fine.
4344

45+
#### Aliases
46+
Currently to use webpack style aliases during imports they need to be defined in `webpack.config', as a custom sass scssAliases to enable in sass and in tsconfig.json to enable importing in typescript
47+
48+
I'm currently looking for a way to share this logic but for now you must update aliases in `webpack.common.js` as well as `packages.json`
49+
4450
## Storybook
4551
[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
4652

@@ -66,7 +72,9 @@ If you don't want storybook remove the following
6672
**NPM Packages**
6773
```
6874
"@storybook/addon-actions": "^5.2.4",
75+
"@storybook/addon-knobs": "^5.2.5",
6976
"@storybook/addon-links": "^5.2.4",
77+
"@storybook/addon-viewport": "^5.2.5",
7078
"@storybook/addons": "^5.2.4",
7179
"@storybook/preset-scss": "^1.0.2",
7280
"@storybook/preset-typescript": "^1.1.0",

‎src/common/helpers.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const toUpper = (value:string) : string => value.toUpperCase();

‎src/components/button/Button.svelte

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,17 @@
44
</button>
55

66
<style type="text/scss">
7-
@import "./../../styles/defaults";
7+
@import "~@styles/defaults";
88
99
button.warn {
1010
background-color: $primary-colour2;
1111
color: $darkest;
1212
}
1313
</style>
1414

15-
<script>
15+
<script lang="ts">
1616
import { createEventDispatcher } from 'svelte';
17-
import { label } from './ButtonData'
17+
import { label } from '@src/components/button/ButtonData'
1818
console.log('Label:', label);
1919
export let text = '';
2020

‎src/components/button/Button2.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import '../../styles/defaults';
1+
@import '~@styles/defaults';
22

33
button.primary {
44
background-color: $primary-colour1;

‎src/components/button/ButtonData.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
1+
import {toUpper} from "@common/helpers";
12

2-
export let label : string = 'World';
3+
4+
export let label : string = toUpper('World');

‎stories/button2.stories.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { action } from '@storybook/addon-actions';
22

3-
import Button2 from '../src/components/button/Button2.svelte';
3+
import Button2 from '@src/components/button/Button2.svelte';
44

55
export default {
66
title: 'Button2',

‎webpack.common.js

+52-47
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,60 @@
1+
const {aliases, scssAliases} = require( "./webpack.parts");
2+
13
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
2-
const { CheckerPlugin } = require('awesome-typescript-loader');
4+
const {CheckerPlugin} = require('awesome-typescript-loader');
35
const CopyPlugin = require('copy-webpack-plugin');
4-
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
6+
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
57
const path = require('path');
68

79
module.exports = {
8-
entry: {
9-
bundle: ['./src/main.ts']
10-
},
11-
resolve: {
12-
alias: {
13-
svelte: path.resolve('node_modules', 'svelte'),
14-
'@styles': path.resolve(__dirname, 'src/styles/'),
15-
},
16-
extensions: ['.mjs', '.ts', '.tsx', '.js', '.svelte', 'scss', 'css'],
17-
mainFields: ['svelte', 'browser', 'module', 'main'],
18-
modules: [path.resolve(__dirname, 'src'), 'node_modules']
19-
},
20-
output: {
21-
path: path.resolve(__dirname, 'build'),
22-
filename: '[name].js',
23-
chunkFilename: '[name].[id].js'
24-
},
25-
module: {
26-
rules: [
27-
{
28-
test: /\.(ts|tsx)$/,
29-
use: [{ loader: require.resolve('awesome-typescript-loader') }],
30-
},
31-
{
32-
test: /\.svelte$/,
33-
use: {
34-
loader: 'svelte-loader',
35-
options: {
36-
emitCss: true,
37-
hotReload: true,
38-
preprocess: require('svelte-preprocess')({ /* options */ })
39-
}
40-
}
41-
}
42-
/*Style rules are customised in separate dev/prod configs*/
43-
]
44-
},
45-
plugins: [
46-
new CleanWebpackPlugin(),
47-
new MiniCssExtractPlugin({
48-
filename: '[name].css'
49-
}),
50-
new CheckerPlugin(),
10+
entry: {
11+
bundle: ['./src/main.ts']
12+
},
13+
resolve: {
14+
alias: aliases,
15+
extensions: ['.mjs', '.ts', '.tsx', '.js', '.svelte', 'scss', 'css'],
16+
mainFields: ['svelte', 'browser', 'module', 'main'],
17+
modules: [path.resolve(__dirname, 'src'), 'node_modules']
18+
},
19+
output: {
20+
path: path.resolve(__dirname, 'build'),
21+
filename: '[name].js',
22+
chunkFilename: '[name].[id].js'
23+
},
24+
module: {
25+
rules: [
26+
{
27+
test: /\.(ts|tsx)$/,
28+
use: [{loader: require.resolve('awesome-typescript-loader')}],
29+
},
30+
{
31+
test: /\.svelte$/,
32+
use: {
33+
loader: 'svelte-loader',
34+
options: {
35+
emitCss: true,
36+
hotReload: true,
37+
preprocess: require('svelte-preprocess')({
38+
scss: {
39+
importer: [
40+
scssAliases(aliases),
41+
],
42+
}
43+
})
44+
}
45+
}
46+
}
47+
/*Style rules are customised in separate dev/prod configs*/
48+
]
49+
},
50+
plugins: [
51+
new CleanWebpackPlugin(),
52+
new MiniCssExtractPlugin({
53+
filename: '[name].css'
54+
}),
55+
new CheckerPlugin(),
5156
new CopyPlugin([
52-
{ from: 'public'}
57+
{from: 'public'}
5358
])
54-
]
59+
]
5560
};

‎webpack.parts.js

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
const path = require('path');
2+
3+
/**
4+
* Enables the use of aliases in sass.
5+
*/
6+
const scssAliases = aliases => {
7+
return url => {
8+
// sass normally requires you to add a ~ character to the start of your aliases
9+
// so we want to remove this before comparing the url to an alias
10+
this.url = url.replace(/^~/, '');
11+
for (const [alias, aliasPath] of Object.entries(aliases)) {
12+
if (this.url.indexOf(alias) === 0) {
13+
return {
14+
file: path.resolve(this.url.replace(alias, aliasPath)),
15+
};
16+
}
17+
}
18+
return url;
19+
};
20+
};
21+
22+
/**
23+
* Aliases used during import, shared between webpack and sass-loader
24+
*/
25+
const aliases = {
26+
//TODO: Look at a way to share tsconfig.json paths and these aliases
27+
svelte: path.resolve('node_modules', 'svelte'),
28+
'@src': path.resolve(__dirname, 'src/'),
29+
'@styles': path.resolve(__dirname, 'src/styles/'),
30+
'@common': path.resolve(__dirname, 'src/common/'),
31+
};
32+
33+
34+
module.exports = { scssAliases, aliases };

‎webpack.prod.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
const {aliases, scssAliases} = require("./webpack.parts");
12
const merge = require('webpack-merge');
23
const common = require('./webpack.common.js');
34
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
@@ -19,7 +20,13 @@ let config = merge.smart(common, {
1920
options: {
2021
emitCss: true,
2122
hotReload: false,
22-
preprocess: require('svelte-preprocess')({ /* options */})
23+
preprocess: require('svelte-preprocess')({
24+
scss: {
25+
importer: [
26+
scssAliases(aliases),
27+
],
28+
}
29+
})
2330
}
2431
}
2532
},

0 commit comments

Comments
 (0)