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

Lines changed: 5 additions & 0 deletions
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

Lines changed: 91 additions & 0 deletions
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

Lines changed: 18 additions & 0 deletions
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

Lines changed: 4 additions & 0 deletions
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

Lines changed: 5 additions & 0 deletions
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

Lines changed: 19 additions & 0 deletions
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

Lines changed: 17 additions & 0 deletions
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

Lines changed: 25 additions & 0 deletions
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

Lines changed: 20 additions & 0 deletions
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

Lines changed: 41 additions & 0 deletions
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+
}

0 commit comments

Comments
 (0)