How to use with sapper

[Mateiadrielrafael]

I've tried to include the sass related rules / plugins (from the site folder) both in the client and server configs but it fails because style-loader tries to access the document object on the server. I think it'll be very helpful if you included a webpack config compatible with sapper.

Sorry if this request is a little bit stupid, i'm just really tired after trying to do it myself for a few days...

[hperrin]

I don't think you need style-loader if you use mini CSS extractor. Maybe that will make it Sapper compatible.

[jihaia]

I too would be interested to see how this might integrate in to the sapper development/build process. I feel sapper would be the typical path for most adopting svelte and there is no doubt that those folks would gravitate to this component library. I'll attempt to integrate into a clean sapper (from Webpack template) project and post issues here as they arise - hopefully we can resolve with relative ease.

btw - excellent job Hunter!

[Mateiadrielrafael]

I've already tried not using style-loader and the page is only styled after its first render (it doesnt get included on the serve)

[jihaia]

I was able to merge the webpack template in to the sapper generated config and implement card, button etc. I did not run in to the the issue reported about the first render (at least not in development mode). But I did run in to issues with some of the subcomponents - such as Row within TopAppBar - throwing an error;

<Row> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules

[mwamp]

Hi,
I think I managed to make it work today,
I have zero experience with bundlers so it might be a real mess and there might be redundant/uneeded parts

For SSR you probably need a better processing in ther server part of the app; smui MUST be a dev dep (according to sapper doc) or you could do the dynamic import trick but that's not very fun day to day

You'll need to install whatever dependency webpack complains about along the way

Webpack :

const webpack = require('webpack');
const config = require('sapper/config/webpack.js');
const pkg = require('./package.json');

const mode = process.env.NODE_ENV;
const dev = mode === 'development';

const extensions = ['.mjs', '.js', '.json', '.svelte', '.html'];
const mainFields = ['svelte', 'module', 'browser', 'main'];

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

const sassOptions = {
  includePaths: [
    './theme',
    './node_modules',
  ]
};

module.exports = {
	client: {
		entry: config.client.entry(),
		output: config.client.output(),
		resolve: { 
			extensions, 
			mainFields, 
		},
		module: {
			rules: [
				{
					test: /\.(svelte|html)$/,
					use: {
						loader: 'svelte-loader',
						options: {
							dev,
							hydratable: true,
							hotReload: false // pending https://github.com/sveltejs/svelte/issues/2377
						}
					}
				},
				{
					test: /\.(sa|sc|c)ss$/,
					use: [
						'style-loader',
						MiniCssExtractPlugin.loader,
						'css-loader',
						{
							loader: 'sass-loader',
							options: {
								sassOptions
							},
						},
					],
				}
			]
		},
		mode,
		plugins: [
			// pending https://github.com/sveltejs/svelte/issues/2377
			// dev && new webpack.HotModuleReplacementPlugin(),
			new webpack.DefinePlugin({
				'process.browser': true,
				'process.env.NODE_ENV': JSON.stringify(mode)
			}),
			new MiniCssExtractPlugin({
				filename: '[name].css',
				chunkFilename: '[name].[id].css',
			}),
			new OptimizeCssAssetsPlugin({
				assetNameRegExp: /\.css$/g,
				cssProcessor: require('cssnano'),
				cssProcessorPluginOptions: {
					preset: ['default', { discardComments: { removeAll: true } }],
				},
				canPrint: true
			})
		].filter(Boolean),
		devtool: dev && 'inline-source-map'
	},

	server: {
		entry: config.server.entry(),
		output: config.server.output(),
		target: 'node',
		resolve: { 
			extensions, 
			mainFields,
    },
		externals: Object.keys(pkg.dependencies).concat('encoding'),
		module: {
			rules: [
				{
					test: /\.(svelte|html)$/,
					use: {
						loader: 'svelte-loader',
						options: {
							css: false,
							generate: 'ssr',
							dev
						}
					}
				},
				{
					test: /\.(sa|sc|c)ss$/,
					use: [
						'style-loader',
						MiniCssExtractPlugin.loader,
						'css-loader',
						{
							loader: 'sass-loader',
							options: {
								sassOptions
							},
						},
					],
				}
			]
		},
		mode: process.env.NODE_ENV,
		plugins: [
			new MiniCssExtractPlugin({
				filename: '[name].css',
				chunkFilename: '[name].[id].css',
			}),
			new OptimizeCssAssetsPlugin({
				assetNameRegExp: /\.css$/g,
				cssProcessor: require('cssnano'),
				cssProcessorPluginOptions: {
					preset: ['default', { discardComments: { removeAll: true } }],
				},
				canPrint: true
			})
		].filter(Boolean),
		performance: {
			hints: false // it doesn't matter if server.js is large
		}
	},

	serviceworker: {
		entry: config.serviceworker.entry(),
		output: config.serviceworker.output(),
		mode: process.env.NODE_ENV
	}
};

[mwamp]

It works fine for me
Pls double check @smui is a dev dependency in your setup or try a dynamic import

[heshdotcc]

The configuration provided by @mwamp it does work, first doing:

npm install mini-css-extract-plugin optimize-css-assets-webpack-plugin \
style-loader css-loader scss-loader sass-loader node-sass

And creating theme/_smui-theme.scss empty file.
But, for example, when implementing the drawer component and calling it from within _layout.svelte it throws the following error at browser:

<Header> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules

[hperrin]

I think I know what's going on. Some components use the ClassAdder.svelte component, but I've only implemented the client API for it.

[hperrin]

Yes, that was it. It'll take a little bit for me to update all the ClassAdder components with support for SSR, so hold tight.

[hperrin]

Ok, I've released a new version, which should fully support SSR and Sapper. Let me know if there are any more bugs. :)

[hperrin]

Look at this glorious screen shot. :D

(That's a SMUI button and card running in a Sapper instance (and the markup is there on page load with JS turned off).)

[jihaia]

Well done. Looking forward to giving it a try.

[Mateiadrielrafael]

@hperrin Me and a few friends made a little challenge of making a paint -like program in one week, so i wanted to use this. For this challenge I ended up using regular mui classes for some components and smui for others + wrapping a few things with #if process.browser. Good job on making it actually work with sapper. Even if the contest - thing ends soon ill definitly use
smui again in the future:)

[quantuminformation]

@Mateiadrielrafael why did you need to use some regular mui classes?

[quantuminformation]

Is there any steps to add to a sapper degit generated project? I tried to use the vanilla material here but wasn't having luck:

https://github.com/QuantumInformation/material-svelte-blueprint

[kafai-lam]

Ok, I've released a new version, which should fully support SSR and Sapper. Let me know if there are any more bugs. :)

May I ask for the configuration for sapper with rollup?

[nickolasgregory]

@kafai97 - there's an example rollup config on #36 (comment)

[hperrin]

There's also an example repo with a sapper/rollup setup linked in the readme.

[manuel3108]

Since Sapper with Rollup is deprecated, I created a sapper-smui-webpack template repository here.

Thanks all for showing your setup to get this working.

Edit: See here for clarification

[heshdotcc]

Since Sapper with Rollup is deprecated, I created a sapper-smui-webpack template repository here.

Thanks all for showing your setup to get this working

What is deprecated? Can elaborate better and/or cite any sources about it?

[manuel3108]

I have seen build": "sapper build --legacy in the official sapper template repo.

But you are right, I could not finde any article / issue about that. Maybe i was a bit to fast in writing this. I edited my answer above!

[kafai-lam]

@kafai97 - there's an example rollup config on #36 (comment)

Here is a sapper template with rollup, which follows the config on that (comment)

[Jan-Kuta]

Look at this glorious screen shot. :D

(That's a SMUI button and card running in a Sapper instance (and the markup is there on page load with JS turned off).)

Hello,
how did you do that. When I try it with JS turned off, no styling is included.

Maybe it relates with this issue: #66

Thank you very much for clarification,
Honza

[michaelcuneo]

Hey guys, any of the non valid SSR components, you can pull in using svelte-loadable to dynamically load the component.

This is how I load up Vime-Svelte, which is not SSR compatible.

<script context="module">
  import { register } from 'svelte-loadable'

  // Loaders must be registered outside of the render tree.
  const VideoLoader = register({
    loader: () => import('../components/VideoSource.svelte'),
    resolve: () => require.resolve('../components/VideoSource.svelte'),
  })
</script>

And then...

<script>
  import Loadable from 'svelte-loadable'

And in the usage...

<Loadable loader="{VideoLoader}" let:component>
  <svelte:component this={component} src={currentMenuItem.video} type={currentMenuItem.videoType} />
</Loadable>

It's a bit more work, but I'm sure it will work fine with these components as well, testing and reporting as soon as I implement these webpack changes to make my SMUI work.