From aec8fc2e194ee45f13a00856f573fe031643ec45 Mon Sep 17 00:00:00 2001 From: casprine Date: Wed, 5 Jun 2019 20:12:53 +0000 Subject: [PATCH 1/4] added sapper setup --- examples/sapper/.gitignore | 5 + examples/sapper/README.md | 69 + examples/sapper/appveyor.yml | 18 + examples/sapper/cypress.json | 4 + examples/sapper/cypress/fixtures/example.json | 5 + examples/sapper/cypress/integration/spec.js | 19 + examples/sapper/cypress/plugins/index.js | 17 + examples/sapper/cypress/support/commands.js | 25 + examples/sapper/cypress/support/index.js | 20 + examples/sapper/package.json | 39 + examples/sapper/postcss.config.js | 5 + examples/sapper/rollup.config.js | 95 + examples/sapper/src/client.js | 5 + examples/sapper/src/components/Nav.svelte | 60 + examples/sapper/src/routes/_error.svelte | 40 + examples/sapper/src/routes/_layout.svelte | 22 + examples/sapper/src/routes/about.svelte | 7 + .../sapper/src/routes/blog/[slug].json.js | 28 + examples/sapper/src/routes/blog/[slug].svelte | 64 + examples/sapper/src/routes/blog/_posts.js | 92 + examples/sapper/src/routes/blog/index.json.js | 16 + examples/sapper/src/routes/blog/index.svelte | 34 + examples/sapper/src/routes/index.svelte | 46 + examples/sapper/src/server.js | 17 + examples/sapper/src/service-worker.js | 82 + examples/sapper/src/template.html | 37 + examples/sapper/static/favicon.png | Bin 0 -> 3127 bytes examples/sapper/static/global.css | 36 + examples/sapper/static/great-success.png | Bin 0 -> 81921 bytes examples/sapper/static/index.css | 35086 ++++++++++++++++ examples/sapper/static/logo-192.png | Bin 0 -> 4760 bytes examples/sapper/static/logo-512.png | Bin 0 -> 13928 bytes examples/sapper/static/manifest.json | 20 + examples/sapper/static/tailwind.css | 3 + examples/sapper/tailwind.js | 7 + examples/sapper/yarn.lock | 3452 ++ 36 files changed, 39475 insertions(+) create mode 100644 examples/sapper/.gitignore create mode 100644 examples/sapper/README.md create mode 100644 examples/sapper/appveyor.yml create mode 100644 examples/sapper/cypress.json create mode 100644 examples/sapper/cypress/fixtures/example.json create mode 100644 examples/sapper/cypress/integration/spec.js create mode 100644 examples/sapper/cypress/plugins/index.js create mode 100644 examples/sapper/cypress/support/commands.js create mode 100644 examples/sapper/cypress/support/index.js create mode 100644 examples/sapper/package.json create mode 100644 examples/sapper/postcss.config.js create mode 100644 examples/sapper/rollup.config.js create mode 100644 examples/sapper/src/client.js create mode 100644 examples/sapper/src/components/Nav.svelte create mode 100644 examples/sapper/src/routes/_error.svelte create mode 100644 examples/sapper/src/routes/_layout.svelte create mode 100644 examples/sapper/src/routes/about.svelte create mode 100644 examples/sapper/src/routes/blog/[slug].json.js create mode 100644 examples/sapper/src/routes/blog/[slug].svelte create mode 100644 examples/sapper/src/routes/blog/_posts.js create mode 100644 examples/sapper/src/routes/blog/index.json.js create mode 100644 examples/sapper/src/routes/blog/index.svelte create mode 100644 examples/sapper/src/routes/index.svelte create mode 100644 examples/sapper/src/server.js create mode 100644 examples/sapper/src/service-worker.js create mode 100644 examples/sapper/src/template.html create mode 100644 examples/sapper/static/favicon.png create mode 100644 examples/sapper/static/global.css create mode 100644 examples/sapper/static/great-success.png create mode 100644 examples/sapper/static/index.css create mode 100644 examples/sapper/static/logo-192.png create mode 100644 examples/sapper/static/logo-512.png create mode 100644 examples/sapper/static/manifest.json create mode 100644 examples/sapper/static/tailwind.css create mode 100644 examples/sapper/tailwind.js create mode 100644 examples/sapper/yarn.lock diff --git a/examples/sapper/.gitignore b/examples/sapper/.gitignore new file mode 100644 index 00000000..ed567f23 --- /dev/null +++ b/examples/sapper/.gitignore @@ -0,0 +1,5 @@ +.DS_Store +node_modules +yarn-error.log +/cypress/screenshots/ +/__sapper__/ diff --git a/examples/sapper/README.md b/examples/sapper/README.md new file mode 100644 index 00000000..b867da75 --- /dev/null +++ b/examples/sapper/README.md @@ -0,0 +1,69 @@ +# Sapper + +Setting up Tailwind with Sapper is really simple, just install Tailwind and pocstcss-cli: + +```sh +npm install tailwindcss postcss-cli --save-dev +``` + +Create your Tailwind config file + +```sh +./node_modules/.bin/tailwind init tailwind.js +``` + +Create a `postcss.config.js` file and add this to it + +```js +const tailwindcss = require("tailwindcss"); + +module.exports = { + plugins: [tailwindcss("./tailwing.js")] +}; +``` + +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 : + +```css +@tailwind base; +@tailwind components; +@tailwind utilities; +``` + +Update your `package.json` with the custom scripts. + +```js +"scripts": { + "watch:tailwind": "postcss static/tailwind.css -o static/index.css -w", +} +``` + +Finally, add a stylesheet link to your `src/template.html` file + +```html + +``` + +## Project setup + +``` +npm install +``` + +### Compiles and hot-reloads for development + +Run these commands in a seperate window + +``` +npm run watch:tailwind +``` + +``` +npm run dev +``` + +### Compiles and minifies for production + +``` +npm run build +``` diff --git a/examples/sapper/appveyor.yml b/examples/sapper/appveyor.yml new file mode 100644 index 00000000..e75da3bf --- /dev/null +++ b/examples/sapper/appveyor.yml @@ -0,0 +1,18 @@ +version: "{build}" + +shallow_clone: true + +init: + - git config --global core.autocrlf false + +build: off + +environment: + matrix: + # node.js + - nodejs_version: stable + +install: + - ps: Install-Product node $env:nodejs_version + - npm install cypress + - npm install diff --git a/examples/sapper/cypress.json b/examples/sapper/cypress.json new file mode 100644 index 00000000..f5622faf --- /dev/null +++ b/examples/sapper/cypress.json @@ -0,0 +1,4 @@ +{ + "baseUrl": "http://localhost:3000", + "video": false +} \ No newline at end of file diff --git a/examples/sapper/cypress/fixtures/example.json b/examples/sapper/cypress/fixtures/example.json new file mode 100644 index 00000000..da18d935 --- /dev/null +++ b/examples/sapper/cypress/fixtures/example.json @@ -0,0 +1,5 @@ +{ + "name": "Using fixtures to represent data", + "email": "hello@cypress.io", + "body": "Fixtures are a great way to mock data for responses to routes" +} \ No newline at end of file diff --git a/examples/sapper/cypress/integration/spec.js b/examples/sapper/cypress/integration/spec.js new file mode 100644 index 00000000..9a7140dd --- /dev/null +++ b/examples/sapper/cypress/integration/spec.js @@ -0,0 +1,19 @@ +describe('Sapper template app', () => { + beforeEach(() => { + cy.visit('/') + }); + + it('has the correct

', () => { + cy.contains('h1', 'Great success!') + }); + + it('navigates to /about', () => { + cy.get('nav a').contains('about').click(); + cy.url().should('include', '/about'); + }); + + it('navigates to /blog', () => { + cy.get('nav a').contains('blog').click(); + cy.url().should('include', '/blog'); + }); +}); \ No newline at end of file diff --git a/examples/sapper/cypress/plugins/index.js b/examples/sapper/cypress/plugins/index.js new file mode 100644 index 00000000..fd170fba --- /dev/null +++ b/examples/sapper/cypress/plugins/index.js @@ -0,0 +1,17 @@ +// *********************************************************** +// This example plugins/index.js can be used to load plugins +// +// You can change the location of this file or turn off loading +// the plugins file with the 'pluginsFile' configuration option. +// +// You can read more here: +// https://on.cypress.io/plugins-guide +// *********************************************************** + +// This function is called when a project is opened or re-opened (e.g. due to +// the project's config changing) + +module.exports = (on, config) => { + // `on` is used to hook into various events Cypress emits + // `config` is the resolved Cypress config +} diff --git a/examples/sapper/cypress/support/commands.js b/examples/sapper/cypress/support/commands.js new file mode 100644 index 00000000..c1f5a772 --- /dev/null +++ b/examples/sapper/cypress/support/commands.js @@ -0,0 +1,25 @@ +// *********************************************** +// This example commands.js shows you how to +// create various custom commands and overwrite +// existing commands. +// +// For more comprehensive examples of custom +// commands please read more here: +// https://on.cypress.io/custom-commands +// *********************************************** +// +// +// -- This is a parent command -- +// Cypress.Commands.add("login", (email, password) => { ... }) +// +// +// -- This is a child command -- +// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) +// +// +// -- This is a dual command -- +// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) +// +// +// -- This is will overwrite an existing command -- +// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) diff --git a/examples/sapper/cypress/support/index.js b/examples/sapper/cypress/support/index.js new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/examples/sapper/cypress/support/index.js @@ -0,0 +1,20 @@ +// *********************************************************** +// This example support/index.js is processed and +// loaded automatically before your test files. +// +// This is a great place to put global configuration and +// behavior that modifies Cypress. +// +// You can change the location of this file or turn off +// automatically serving support files with the +// 'supportFile' configuration option. +// +// You can read more here: +// https://on.cypress.io/configuration +// *********************************************************** + +// Import commands.js using ES2015 syntax: +import './commands' + +// Alternatively you can use CommonJS syntax: +// require('./commands') diff --git a/examples/sapper/package.json b/examples/sapper/package.json new file mode 100644 index 00000000..8363420e --- /dev/null +++ b/examples/sapper/package.json @@ -0,0 +1,39 @@ +{ + "name": "TODO", + "description": "TODO", + "version": "0.0.1", + "scripts": { + "watch:tailwind": "postcss static/tailwind.css -o static/index.css -w", + "build": "sapper build --legacy", + "dev": "sapper dev", + "export": "sapper export --legacy", + "start": "node __sapper__/build", + "cy:run": "cypress run", + "cy:open": "cypress open", + "test": "run-p --race dev cy:run" + }, + "dependencies": { + "compression": "^1.7.1", + "polka": "^0.5.0", + "sirv": "^0.4.0" + }, + "devDependencies": { + "@babel/core": "^7.0.0", + "@babel/plugin-syntax-dynamic-import": "^7.0.0", + "@babel/plugin-transform-runtime": "^7.0.0", + "@babel/preset-env": "^7.0.0", + "@babel/runtime": "^7.0.0", + "npm-run-all": "^4.1.5", + "postcss-cli": "^6.1.2", + "rollup": "^1.0.0", + "rollup-plugin-babel": "^4.0.2", + "rollup-plugin-commonjs": "^9.1.6", + "rollup-plugin-node-resolve": "^4.0.0", + "rollup-plugin-replace": "^2.0.0", + "rollup-plugin-svelte": "^5.0.1", + "rollup-plugin-terser": "^4.0.4", + "sapper": "^0.27.0", + "svelte": "^3.0.0", + "tailwindcss": "^1.0.3" + } +} diff --git a/examples/sapper/postcss.config.js b/examples/sapper/postcss.config.js new file mode 100644 index 00000000..9e41e75e --- /dev/null +++ b/examples/sapper/postcss.config.js @@ -0,0 +1,5 @@ +const tailwindcss = require("tailwindcss"); + +module.exports = { + plugins: [tailwindcss("./tailwind.js")] +}; diff --git a/examples/sapper/rollup.config.js b/examples/sapper/rollup.config.js new file mode 100644 index 00000000..694bb0a3 --- /dev/null +++ b/examples/sapper/rollup.config.js @@ -0,0 +1,95 @@ +import resolve from 'rollup-plugin-node-resolve'; +import replace from 'rollup-plugin-replace'; +import commonjs from 'rollup-plugin-commonjs'; +import svelte from 'rollup-plugin-svelte'; +import babel from 'rollup-plugin-babel'; +import { terser } from 'rollup-plugin-terser'; +import config from 'sapper/config/rollup.js'; +import pkg from './package.json'; + +const mode = process.env.NODE_ENV; +const dev = mode === 'development'; +const legacy = !!process.env.SAPPER_LEGACY_BUILD; + +const onwarn = (warning, onwarn) => (warning.code === 'CIRCULAR_DEPENDENCY' && warning.message.includes('/@sapper/')) || onwarn(warning); + +export default { + client: { + input: config.client.input(), + output: config.client.output(), + plugins: [ + replace({ + 'process.browser': true, + 'process.env.NODE_ENV': JSON.stringify(mode) + }), + svelte({ + dev, + hydratable: true, + emitCss: true + }), + resolve(), + commonjs(), + + legacy && babel({ + extensions: ['.js', '.mjs', '.html', '.svelte'], + runtimeHelpers: true, + exclude: ['node_modules/@babel/**'], + presets: [ + ['@babel/preset-env', { + targets: '> 0.25%, not dead' + }] + ], + plugins: [ + '@babel/plugin-syntax-dynamic-import', + ['@babel/plugin-transform-runtime', { + useESModules: true + }] + ] + }), + + !dev && terser({ + module: true + }) + ], + + onwarn, + }, + + server: { + input: config.server.input(), + output: config.server.output(), + plugins: [ + replace({ + 'process.browser': false, + 'process.env.NODE_ENV': JSON.stringify(mode) + }), + svelte({ + generate: 'ssr', + dev + }), + resolve(), + commonjs() + ], + external: Object.keys(pkg.dependencies).concat( + require('module').builtinModules || Object.keys(process.binding('natives')) + ), + + onwarn, + }, + + serviceworker: { + input: config.serviceworker.input(), + output: config.serviceworker.output(), + plugins: [ + resolve(), + replace({ + 'process.browser': true, + 'process.env.NODE_ENV': JSON.stringify(mode) + }), + commonjs(), + !dev && terser() + ], + + onwarn, + } +}; diff --git a/examples/sapper/src/client.js b/examples/sapper/src/client.js new file mode 100644 index 00000000..cec91725 --- /dev/null +++ b/examples/sapper/src/client.js @@ -0,0 +1,5 @@ +import * as sapper from '@sapper/app'; + +sapper.start({ + target: document.querySelector('#sapper') +}); \ No newline at end of file diff --git a/examples/sapper/src/components/Nav.svelte b/examples/sapper/src/components/Nav.svelte new file mode 100644 index 00000000..63d5150b --- /dev/null +++ b/examples/sapper/src/components/Nav.svelte @@ -0,0 +1,60 @@ + + + + + \ No newline at end of file diff --git a/examples/sapper/src/routes/_error.svelte b/examples/sapper/src/routes/_error.svelte new file mode 100644 index 00000000..320e5870 --- /dev/null +++ b/examples/sapper/src/routes/_error.svelte @@ -0,0 +1,40 @@ + + + + + + {status} + + +

{status}

+ +

{error.message}

+ +{#if dev && error.stack} + 
{error.stack}
+{/if} diff --git a/examples/sapper/src/routes/_layout.svelte b/examples/sapper/src/routes/_layout.svelte new file mode 100644 index 00000000..8432299e --- /dev/null +++ b/examples/sapper/src/routes/_layout.svelte @@ -0,0 +1,22 @@ + + + + +