diff --git a/.github/workflows/build-templates.yml b/.github/workflows/build-templates.yml new file mode 100644 index 0000000..c6e9181 --- /dev/null +++ b/.github/workflows/build-templates.yml @@ -0,0 +1,18 @@ +name: Create templates +on: + push: + branches: + - master +jobs: + build: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v1 + - uses: actions/setup-node@v1 + - + env: + CI: true + SSH_KEY: ${{ secrets.SSH_KEY }} + SSH_KEY_ROLLUP: ${{ secrets.SSH_KEY_ROLLUP }} + SSH_KEY_WEBPACK: ${{ secrets.SSH_KEY_WEBPACK }} + run: _template/build.sh diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index 53c7097..0000000 --- a/.travis.yml +++ /dev/null @@ -1,11 +0,0 @@ -sudo: false -language: node_js -node_js: - - "stable" -env: - global: - - BUILD_TIMEOUT=10000 -branches: - only: - - master -script: _template/build.sh diff --git a/README.md b/README.md index 31524bc..49b74dc 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,35 @@ # sapper-template -The default [Sapper](https://github.com/sveltejs/sapper) template, with branches for Rollup and webpack. To clone it and get started: +The default [Sapper](https://github.com/sveltejs/sapper) template, available for Rollup and webpack. + + +## Getting started + + +### Using `degit` + +[`degit`](https://github.com/Rich-Harris/degit) is a scaffolding tool that lets you create a directory from a branch in a repository. Use either the `rollup` or `webpack` branch in `sapper-template`: ```bash # for Rollup npx degit "sveltejs/sapper-template#rollup" my-app # for webpack npx degit "sveltejs/sapper-template#webpack" my-app +``` + + +### Using GitHub templates + +Alternatively, you can use GitHub's template feature with the [sapper-template-rollup](https://github.com/sveltejs/sapper-template-rollup) or [sapper-template-webpack](https://github.com/sveltejs/sapper-template-webpack) repositories. + + +### Running the project + +However you get the code, you can install dependencies and run the project in development mode with: + +```bash cd my-app -npm install # or yarn! +npm install # or yarn npm run dev ``` @@ -46,7 +67,7 @@ There are three simple rules for naming the files that define your routes: The [static](static) directory contains any static assets that should be available. These are served using [sirv](https://github.com/lukeed/sirv). -In your [service-worker.js](app/service-worker.js) file, you can import these as `files` from the generated manifest... +In your [service-worker.js](src/service-worker.js) file, you can import these as `files` from the generated manifest... ```js import { files } from '@sapper/service-worker'; @@ -64,19 +85,21 @@ Sapper uses Rollup or webpack to provide code-splitting and dynamic imports, as To start a production version of your app, run `npm run build && npm start`. This will disable live reloading, and activate the appropriate bundler plugins. -You can deploy your application to any environment that supports Node 8 or above. As an example, to deploy to [Now](https://zeit.co/now), run these commands: +You can deploy your application to any environment that supports Node 10 or above. As an example, to deploy to [Vercel Now](https://vercel.com) when using `sapper export`, run these commands: ```bash -npm install -g now -now +npm install -g vercel +vercel ``` +If your app can't be exported to a static site, you can use the [now-sapper](https://github.com/thgh/now-sapper) builder. You can find instructions on how to do so in its [README](https://github.com/thgh/now-sapper#basic-usage). -## Using external components with webpack + +## Using external components When using Svelte components installed from npm, such as [@sveltejs/svelte-virtual-list](https://github.com/sveltejs/svelte-virtual-list), Svelte needs the original component source (rather than any precompiled JavaScript that ships with the component). This allows the component to be rendered server-side, and also keeps your client-side app smaller. -Because of that, it's essential that webpack doesn't treat the package as an *external dependency*. You can either modify the `externals` option under `server` in [webpack.config.js](webpack.config.js), or simply install the package to `devDependencies` rather than `dependencies`, which will cause it to get bundled (and therefore compiled) with your app: +Because of that, it's essential that the bundler doesn't treat the package as an *external dependency*. You can either modify the `external` option under `server` in [rollup.config.js](rollup.config.js) or the `externals` option in [webpack.config.js](webpack.config.js), or simply install the package to `devDependencies` rather than `dependencies`, which will cause it to get bundled (and therefore compiled) with your app: ```bash npm install -D @sveltejs/svelte-virtual-list diff --git a/_template/build.sh b/_template/build.sh index deb8dfb..7d11a13 100755 --- a/_template/build.sh +++ b/_template/build.sh @@ -1,19 +1,19 @@ #!/bin/bash -cd "$(dirname $0)" +cd "$(dirname "$0")" if [ "$CI" ]; then - # write out SSH key - [ "$SSH_KEY" ] || exit 1 - echo "$SSH_KEY" > ~/.ssh/id_rsa - chmod 600 ~/.ssh/id_rsa + (umask 0077; echo "$SSH_KEY" > ~/ssh_key; echo "$SSH_KEY_ROLLUP" > ~/ssh_key_rollup; echo "$SSH_KEY_WEBPACK" > ~/ssh_key_webpack) + git config user.email 'noreply@svelte.dev' + git config user.name '[bot]' fi # branch names -DEFAULT=master ROLLUP=rollup WEBPACK=webpack -./create-branches.sh $DEFAULT $ROLLUP $WEBPACK +./create-branches.sh $ROLLUP $WEBPACK -# force push rollup and webpack branches -git push git@github.com:sveltejs/sapper-template.git $ROLLUP $WEBPACK -f +# force push rollup and webpack branches and repos +GIT_SSH_COMMAND='ssh -o StrictHostKeyChecking=accept-new -i ~/ssh_key' git push git@github.com:sveltejs/sapper-template.git $ROLLUP $WEBPACK -f +GIT_SSH_COMMAND='ssh -o StrictHostKeyChecking=accept-new -i ~/ssh_key_rollup' git push git@github.com:sveltejs/sapper-template-rollup.git $ROLLUP:master -f +GIT_SSH_COMMAND='ssh -o StrictHostKeyChecking=accept-new -i ~/ssh_key_webpack' git push git@github.com:sveltejs/sapper-template-webpack.git $WEBPACK:master -f diff --git a/_template/create-branches.sh b/_template/create-branches.sh index 1128578..906b65a 100755 --- a/_template/create-branches.sh +++ b/_template/create-branches.sh @@ -1,31 +1,25 @@ #!/bin/bash -cd "$(dirname $0)"/.. +cd "$(dirname "$0")"/.. -DEFAULT=${1:-master} -ROLLUP=${2:-rollup} -WEBPACK=${3:-webpack} +HEAD=$(git rev-parse HEAD) -echo "Creating $ROLLUP and $WEBPACK branches from $DEFAULT" +ROLLUP=${1:-rollup} +WEBPACK=${2:-webpack} -# make sure we're on master, and delete the $ROLLUP and $WEBPACK branches -git symbolic-ref HEAD "refs/heads/$DEFAULT" -git reset --hard -git branch -D $ROLLUP $WEBPACK +echo "Creating $ROLLUP and $WEBPACK branches from $REV" -# create the $ROLLUP branch off the current master -git checkout -b $ROLLUP +# create the $ROLLUP branch off the current HEAD +git symbolic-ref HEAD refs/heads/$ROLLUP +git reset $HEAD --hard node _template/build-pkg.js rollup -git rm -r --cached .travis.yml _template package_template.json webpack.config.js +git rm -r --cached .github _template package_template.json webpack.config.js git add package.json git commit -m 'Sapper template for Rollup' -git symbolic-ref HEAD "refs/heads/$DEFAULT" -git reset --hard -# create the $WEBPACK branch off the current master -git checkout -b $WEBPACK +# create the $WEBPACK branch off the current HEAD +git symbolic-ref HEAD refs/heads/$WEBPACK +git reset $HEAD --hard node _template/build-pkg.js webpack -git rm -r --cached .travis.yml _template package_template.json rollup.config.js +git rm -r --cached .github _template package_template.json rollup.config.js git add package.json git commit -m 'Sapper template for webpack' -git symbolic-ref HEAD "refs/heads/$DEFAULT" -git reset --hard \ No newline at end of file diff --git a/appveyor.yml b/appveyor.yml deleted file mode 100644 index e75da3b..0000000 --- a/appveyor.yml +++ /dev/null @@ -1,18 +0,0 @@ -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/package_template.json b/package_template.json index 290ec35..d407d9f 100644 --- a/package_template.json +++ b/package_template.json @@ -13,7 +13,7 @@ }, "dependencies": { "compression": "^1.7.1", - "polka": "^0.5.0", + "polka": "next", "sirv": "^0.4.0" }, "devDependencies": { @@ -33,13 +33,13 @@ "@babel/plugin-transform-runtime": "^7.0.0", "@babel/preset-env": "^7.0.0", "@babel/runtime": "^7.0.0", - "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-babel": "^5.0.0", + "@rollup/plugin-commonjs": "^12.0.0", + "@rollup/plugin-node-resolve": "^8.0.0", + "@rollup/plugin-replace": "^2.2.0", + "rollup": "^2.3.4", "rollup-plugin-svelte": "^5.0.1", - "rollup-plugin-terser": "^4.0.4" + "rollup-plugin-terser": "^5.3.0" } }, "webpack": { diff --git a/rollup.config.js b/rollup.config.js index 0571474..a1d449e 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,8 +1,8 @@ -import resolve from 'rollup-plugin-node-resolve'; -import replace from 'rollup-plugin-replace'; -import commonjs from 'rollup-plugin-commonjs'; +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 babel from '@rollup/plugin-babel'; import { terser } from 'rollup-plugin-terser'; import config from 'sapper/config/rollup.js'; import pkg from './package.json'; @@ -28,13 +28,14 @@ export default { emitCss: true }), resolve({ - browser: true + browser: true, + dedupe: ['svelte'] }), commonjs(), legacy && babel({ extensions: ['.js', '.mjs', '.html', '.svelte'], - runtimeHelpers: true, + babelHelpers: 'runtime', exclude: ['node_modules/@babel/**'], presets: [ ['@babel/preset-env', { @@ -54,6 +55,7 @@ export default { }) ], + preserveEntrySignatures: false, onwarn, }, @@ -69,13 +71,16 @@ export default { generate: 'ssr', dev }), - resolve(), + resolve({ + dedupe: ['svelte'] + }), commonjs() ], external: Object.keys(pkg.dependencies).concat( require('module').builtinModules || Object.keys(process.binding('natives')) ), + preserveEntrySignatures: 'strict', onwarn, }, @@ -92,6 +97,7 @@ export default { !dev && terser() ], + preserveEntrySignatures: false, onwarn, } }; diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte index 63d5150..49a94ed 100644 --- a/src/components/Nav.svelte +++ b/src/components/Nav.svelte @@ -26,12 +26,12 @@ float: left; } - .selected { + [aria-current] { position: relative; display: inline-block; } - .selected::after { + [aria-current]::after { position: absolute; content: ''; width: calc(100% - 1em); @@ -50,11 +50,11 @@ \ No newline at end of file + diff --git a/src/routes/blog/[slug].svelte b/src/routes/blog/[slug].svelte index 368e02e..9e0c419 100644 --- a/src/routes/blog/[slug].svelte +++ b/src/routes/blog/[slug].svelte @@ -1,7 +1,7 @@