Skip to content
This repository was archived by the owner on May 8, 2021. It is now read-only.

Commit db769da

Browse files
adamwathanadamwathan
authored
Merge pull request #5 from casprine/master
Add Svelte and Sapper example
2 parents 8bcd5cb + 31333ce commit db769da

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+77849
-0
lines changed

‎examples/sapper/.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.DS_Store
2+
node_modules
3+
yarn-error.log
4+
/cypress/screenshots/
5+
/__sapper__/

‎examples/sapper/README.md

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
# Sapper
2+
3+
Setting up Tailwind with Sapper is really simple, just install Tailwind and pocstcss-cli:
4+
5+
```sh
6+
npm install tailwindcss postcss-cli --save-dev
7+
```
8+
9+
If you want to remove unused styles, add PurgeCSS as well
10+
11+
```
12+
npm install @fullhuman/postcss-purgecss
13+
```
14+
15+
Create your Tailwind config file
16+
17+
```sh
18+
./node_modules/.bin/tailwind init tailwind.js
19+
```
20+
21+
Create a `postcss.config.js` file and add this to it
22+
23+
```js
24+
const tailwindcss = require("tailwindcss");
25+
26+
// only needed if you want to purge
27+
const purgecss = require("@fullhuman/postcss-purgecss")({
28+
content: ["./src/**/*.svelte", "./src/**/*.html"],
29+
defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
30+
});
31+
32+
module.exports = {
33+
plugins: [
34+
tailwindcss("./tailwind.js"),
35+
36+
// only needed if you want to purge
37+
...(process.env.NODE_ENV === "production" ? [purgecss] : [])
38+
]
39+
};
40+
```
41+
42+
Next, create a CSS file for your Tailwind styles. You have to store in it static folder `static/tailwind.css` and add this to it :
43+
44+
```css
45+
@tailwind base;
46+
@tailwind components;
47+
@tailwind utilities;
48+
```
49+
50+
Update your `package.json` with the custom scripts.
51+
52+
`build:tailwind is only needed if you want to purge`
53+
54+
```js
55+
"scripts": {
56+
"watch:tailwind": "postcss static/tailwind.css -o static/index.css -w",
57+
"build:tailwind": "NODE_ENV=production postcss static/tailwind.css -o static/index.css" ,
58+
"build": "npm run build:tailwind && sapper build --legacy",
59+
60+
}
61+
```
62+
63+
Finally, add a stylesheet link to your `src/template.html` file
64+
65+
```html
66+
<link rel="stylesheet" href="index.css" />
67+
```
68+
69+
## Project setup
70+
71+
```
72+
npm install
73+
```
74+
75+
### Compiles and hot-reloads for development
76+
77+
Run these commands in a seperate window
78+
79+
```
80+
npm run watch:tailwind
81+
```
82+
83+
```
84+
npm run dev
85+
```
86+
87+
### Compiles and minifies for production
88+
89+
```
90+
npm run build
91+
```

‎examples/sapper/appveyor.yml

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
version: "{build}"
2+
3+
shallow_clone: true
4+
5+
init:
6+
- git config --global core.autocrlf false
7+
8+
build: off
9+
10+
environment:
11+
matrix:
12+
# node.js
13+
- nodejs_version: stable
14+
15+
install:
16+
- ps: Install-Product node $env:nodejs_version
17+
- npm install cypress
18+
- npm install

‎examples/sapper/cypress.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"baseUrl": "http://localhost:3000",
3+
"video": false
4+
}

‎examples/sapper/cypress/fixtures/example.json

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"name": "Using fixtures to represent data",
3+
"email": "[email protected]",
4+
"body": "Fixtures are a great way to mock data for responses to routes"
5+
}

‎examples/sapper/cypress/integration/spec.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
describe('Sapper template app', () => {
2+
beforeEach(() => {
3+
cy.visit('/')
4+
});
5+
6+
it('has the correct <h1>', () => {
7+
cy.contains('h1', 'Great success!')
8+
});
9+
10+
it('navigates to /about', () => {
11+
cy.get('nav a').contains('about').click();
12+
cy.url().should('include', '/about');
13+
});
14+
15+
it('navigates to /blog', () => {
16+
cy.get('nav a').contains('blog').click();
17+
cy.url().should('include', '/blog');
18+
});
19+
});

‎examples/sapper/cypress/plugins/index.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// ***********************************************************
2+
// This example plugins/index.js can be used to load plugins
3+
//
4+
// You can change the location of this file or turn off loading
5+
// the plugins file with the 'pluginsFile' configuration option.
6+
//
7+
// You can read more here:
8+
// https://on.cypress.io/plugins-guide
9+
// ***********************************************************
10+
11+
// This function is called when a project is opened or re-opened (e.g. due to
12+
// the project's config changing)
13+
14+
module.exports = (on, config) => {
15+
// `on` is used to hook into various events Cypress emits
16+
// `config` is the resolved Cypress config
17+
}

‎examples/sapper/cypress/support/commands.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// ***********************************************
2+
// This example commands.js shows you how to
3+
// create various custom commands and overwrite
4+
// existing commands.
5+
//
6+
// For more comprehensive examples of custom
7+
// commands please read more here:
8+
// https://on.cypress.io/custom-commands
9+
// ***********************************************
10+
//
11+
//
12+
// -- This is a parent command --
13+
// Cypress.Commands.add("login", (email, password) => { ... })
14+
//
15+
//
16+
// -- This is a child command --
17+
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
18+
//
19+
//
20+
// -- This is a dual command --
21+
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
22+
//
23+
//
24+
// -- This is will overwrite an existing command --
25+
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

‎examples/sapper/cypress/support/index.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// ***********************************************************
2+
// This example support/index.js is processed and
3+
// loaded automatically before your test files.
4+
//
5+
// This is a great place to put global configuration and
6+
// behavior that modifies Cypress.
7+
//
8+
// You can change the location of this file or turn off
9+
// automatically serving support files with the
10+
// 'supportFile' configuration option.
11+
//
12+
// You can read more here:
13+
// https://on.cypress.io/configuration
14+
// ***********************************************************
15+
16+
// Import commands.js using ES2015 syntax:
17+
import './commands'
18+
19+
// Alternatively you can use CommonJS syntax:
20+
// require('./commands')

‎examples/sapper/package.json

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"name": "TODO",
3+
"description": "TODO",
4+
"version": "0.0.1",
5+
"scripts": {
6+
"watch:tailwind": "postcss static/tailwind.css -o static/index.css -w",
7+
"build:tailwind": "NODE_ENV=production postcss static/tailwind.css -o static/index.css",
8+
"build": "npm run build:tailwind && sapper build --legacy",
9+
"dev": "sapper dev",
10+
"export": "sapper export --legacy",
11+
"start": "node __sapper__/build",
12+
"cy:run": "cypress run",
13+
"cy:open": "cypress open",
14+
"test": "run-p --race dev cy:run"
15+
},
16+
"dependencies": {
17+
"@fullhuman/postcss-purgecss": "^1.2.0",
18+
"compression": "^1.7.1",
19+
"polka": "^0.5.0",
20+
"sirv": "^0.4.0"
21+
},
22+
"devDependencies": {
23+
"@babel/core": "^7.0.0",
24+
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
25+
"@babel/plugin-transform-runtime": "^7.0.0",
26+
"@babel/preset-env": "^7.0.0",
27+
"@babel/runtime": "^7.0.0",
28+
"npm-run-all": "^4.1.5",
29+
"postcss-cli": "^6.1.2",
30+
"rollup": "^1.0.0",
31+
"rollup-plugin-babel": "^4.0.2",
32+
"rollup-plugin-commonjs": "^9.1.6",
33+
"rollup-plugin-node-resolve": "^4.0.0",
34+
"rollup-plugin-replace": "^2.0.0",
35+
"rollup-plugin-svelte": "^5.0.1",
36+
"rollup-plugin-terser": "^4.0.4",
37+
"sapper": "^0.27.0",
38+
"svelte": "^3.0.0",
39+
"tailwindcss": "^1.0.3"
40+
}
41+
}

‎examples/sapper/postcss.config.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
const tailwindcss = require("tailwindcss");
2+
3+
// only needed if you want to purge
4+
const purgecss = require("@fullhuman/postcss-purgecss")({
5+
content: ["./src/**/*.svelte", "./src/**/*.html"],
6+
defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
7+
});
8+
9+
module.exports = {
10+
plugins: [
11+
tailwindcss("./tailwind.js"),
12+
13+
// only needed if you want to purge
14+
...(process.env.NODE_ENV === "production" ? [purgecss] : [])
15+
]
16+
};

‎examples/sapper/rollup.config.js

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import resolve from 'rollup-plugin-node-resolve';
2+
import replace from 'rollup-plugin-replace';
3+
import commonjs from 'rollup-plugin-commonjs';
4+
import svelte from 'rollup-plugin-svelte';
5+
import babel from 'rollup-plugin-babel';
6+
import { terser } from 'rollup-plugin-terser';
7+
import config from 'sapper/config/rollup.js';
8+
import pkg from './package.json';
9+
10+
const mode = process.env.NODE_ENV;
11+
const dev = mode === 'development';
12+
const legacy = !!process.env.SAPPER_LEGACY_BUILD;
13+
14+
const onwarn = (warning, onwarn) => (warning.code === 'CIRCULAR_DEPENDENCY' && warning.message.includes('/@sapper/')) || onwarn(warning);
15+
16+
export default {
17+
client: {
18+
input: config.client.input(),
19+
output: config.client.output(),
20+
plugins: [
21+
replace({
22+
'process.browser': true,
23+
'process.env.NODE_ENV': JSON.stringify(mode)
24+
}),
25+
svelte({
26+
dev,
27+
hydratable: true,
28+
emitCss: true
29+
}),
30+
resolve(),
31+
commonjs(),
32+
33+
legacy && babel({
34+
extensions: ['.js', '.mjs', '.html', '.svelte'],
35+
runtimeHelpers: true,
36+
exclude: ['node_modules/@babel/**'],
37+
presets: [
38+
['@babel/preset-env', {
39+
targets: '> 0.25%, not dead'
40+
}]
41+
],
42+
plugins: [
43+
'@babel/plugin-syntax-dynamic-import',
44+
['@babel/plugin-transform-runtime', {
45+
useESModules: true
46+
}]
47+
]
48+
}),
49+
50+
!dev && terser({
51+
module: true
52+
})
53+
],
54+
55+
onwarn,
56+
},
57+
58+
server: {
59+
input: config.server.input(),
60+
output: config.server.output(),
61+
plugins: [
62+
replace({
63+
'process.browser': false,
64+
'process.env.NODE_ENV': JSON.stringify(mode)
65+
}),
66+
svelte({
67+
generate: 'ssr',
68+
dev
69+
}),
70+
resolve(),
71+
commonjs()
72+
],
73+
external: Object.keys(pkg.dependencies).concat(
74+
require('module').builtinModules || Object.keys(process.binding('natives'))
75+
),
76+
77+
onwarn,
78+
},
79+
80+
serviceworker: {
81+
input: config.serviceworker.input(),
82+
output: config.serviceworker.output(),
83+
plugins: [
84+
resolve(),
85+
replace({
86+
'process.browser': true,
87+
'process.env.NODE_ENV': JSON.stringify(mode)
88+
}),
89+
commonjs(),
90+
!dev && terser()
91+
],
92+
93+
onwarn,
94+
}
95+
};

‎examples/sapper/src/client.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import * as sapper from '@sapper/app';
2+
3+
sapper.start({
4+
target: document.querySelector('#sapper')
5+
});

0 commit comments

Comments
 (0)