From 2eed038e6b3c63d022ea751f742c5fd03b67b40d Mon Sep 17 00:00:00 2001 From: Yanzhen Yu Date: Wed, 17 Oct 2018 12:06:18 +0800 Subject: [PATCH] init repo --- .gitignore | 7 +++++ .prettierrc | 4 +++ README.md | 70 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 21 ++++++++++++++ public/global.css | 61 +++++++++++++++++++++++++++++++++++++++++ public/index.html | 16 +++++++++++ rollup.config.js | 43 +++++++++++++++++++++++++++++ src/App.html | 17 ++++++++++++ src/Player.html | 17 ++++++++++++ src/main.js | 10 +++++++ 10 files changed, 266 insertions(+) create mode 100644 .gitignore create mode 100644 .prettierrc create mode 100644 README.md create mode 100644 package.json create mode 100644 public/global.css create mode 100644 public/index.html create mode 100644 rollup.config.js create mode 100644 src/App.html create mode 100644 src/Player.html create mode 100644 src/main.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..49acba00 --- /dev/null +++ b/.gitignore @@ -0,0 +1,7 @@ +.DS_Store +node_modules +public/bundle.* +package-lock.json +yarn.lock + +.vscode diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..a20502b7 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,4 @@ +{ + "singleQuote": true, + "trailingComma": "all" +} diff --git a/README.md b/README.md new file mode 100644 index 00000000..3e411bf6 --- /dev/null +++ b/README.md @@ -0,0 +1,70 @@ +*Psst — looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)* + +--- + +# svelte app + +This is a project template for [Svelte](https://svelte.technology) apps. It lives at https://github.com/sveltejs/template. + +To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit): + +```bash +npm install -g degit # you only need to do this once + +degit sveltejs/template svelte-app +cd svelte-app +``` + +*Note that you will need to have [Node.js](https://nodejs.org) installed.* + + +## Get started + +Install the dependencies... + +```bash +cd svelte-app +npm install +``` + +...then start [Rollup](https://rollupjs.org): + +```bash +npm run dev +``` + +Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes. + + +## Deploying to the web + +### With [now](https://zeit.co/now) + +Install `now` if you haven't already: + +```bash +npm install -g now +``` + +Then, from within your project folder: + +```bash +now +``` + +As an alternative, use the [Now desktop client](https://zeit.co/download) and simply drag the unzipped project folder to the taskbar icon. + +### With [surge](https://surge.sh/) + +Install `surge` if you haven't already: + +```bash +npm install -g surge +``` + +Then, from within your project folder: + +```bash +npm run build +surge public +``` diff --git a/package.json b/package.json new file mode 100644 index 00000000..b07af65f --- /dev/null +++ b/package.json @@ -0,0 +1,21 @@ +{ + "name": "rrweb-player", + "version": "0.1.0", + "devDependencies": { + "npm-run-all": "^4.1.3", + "rollup": "^0.66.2", + "rollup-plugin-commonjs": "^9.1.8", + "rollup-plugin-node-resolve": "^3.4.0", + "rollup-plugin-svelte": "^4.3.1", + "rollup-plugin-terser": "^3.0.0", + "sirv-cli": "^0.2.2", + "svelte": "^2.13.5" + }, + "scripts": { + "build": "rollup -c", + "autobuild": "rollup -c -w", + "dev": "run-p start:dev autobuild", + "start": "sirv public", + "start:dev": "sirv public --dev" + } +} \ No newline at end of file diff --git a/public/global.css b/public/global.css new file mode 100644 index 00000000..9d682a39 --- /dev/null +++ b/public/global.css @@ -0,0 +1,61 @@ +html, body { + position: relative; + width: 100%; + height: 100%; +} + +body { + color: #333; + margin: 0; + padding: 8px; + box-sizing: border-box; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; +} + +a { + color: rgb(0,100,200); + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +a:visited { + color: rgb(0,80,160); +} + +label { + display: block; +} + +input, button, select, textarea { + font-family: inherit; + font-size: inherit; + padding: 0.4em; + margin: 0 0 0.5em 0; + box-sizing: border-box; + border: 1px solid #ccc; + border-radius: 2px; +} + +input:disabled { + color: #ccc; +} + +input[type="range"] { + height: 0; +} + +button { + background-color: #f4f4f4; + outline: none; +} + +button:active { + background-color: #ddd; +} + +button:focus { + border-color: #666; +} \ No newline at end of file diff --git a/public/index.html b/public/index.html new file mode 100644 index 00000000..6bb5adc0 --- /dev/null +++ b/public/index.html @@ -0,0 +1,16 @@ + + + + + + + Svelte app + + + + + + + + + \ No newline at end of file diff --git a/rollup.config.js b/rollup.config.js new file mode 100644 index 00000000..d9aa4278 --- /dev/null +++ b/rollup.config.js @@ -0,0 +1,43 @@ +import svelte from 'rollup-plugin-svelte'; +import resolve from 'rollup-plugin-node-resolve'; +import commonjs from 'rollup-plugin-commonjs'; +import { terser } from 'rollup-plugin-terser'; + +const production = !process.env.ROLLUP_WATCH; + +export default { + input: 'src/main.js', + output: { + sourcemap: true, + format: 'iife', + name: 'app', + file: 'public/bundle.js' + }, + plugins: [ + svelte({ + // opt in to v3 behaviour today + skipIntroByDefault: true, + nestedTransitions: true, + + // enable run-time checks when not in production + dev: !production, + // we'll extract any component CSS out into + // a separate file — better for performance + css: css => { + css.write('public/bundle.css'); + } + }), + + // If you have external dependencies installed from + // npm, you'll most likely need these plugins. In + // some cases you'll need additional configuration — + // consult the documentation for details: + // https://github.com/rollup/rollup-plugin-commonjs + resolve(), + commonjs(), + + // If we're building for production (npm run build + // instead of npm run dev), minify + production && terser() + ] +}; diff --git a/src/App.html b/src/App.html new file mode 100644 index 00000000..140cf9d3 --- /dev/null +++ b/src/App.html @@ -0,0 +1,17 @@ +

+ rrweb player playground +

+ + + + + \ No newline at end of file diff --git a/src/Player.html b/src/Player.html new file mode 100644 index 00000000..719e03a7 --- /dev/null +++ b/src/Player.html @@ -0,0 +1,17 @@ +
+ rrplayer +
+ + + + diff --git a/src/main.js b/src/main.js new file mode 100644 index 00000000..c804ceec --- /dev/null +++ b/src/main.js @@ -0,0 +1,10 @@ +import App from './App.html'; + +const app = new App({ + target: document.body, + data: { + name: 'world' + } +}); + +export default app; \ No newline at end of file