Переглянути джерело

dev example: re-build lib automatically, don’t open browser and no ghosts, start companion

Artur Paikin 6 роки тому
батько
коміт
af115f3ace
5 змінених файлів з 183 додано та 5 видалено
  1. 36 0
      examples/dev/index.html
  2. 65 0
      examples/dev/main.js
  3. 16 0
      examples/dev/package.json
  4. 61 0
      examples/dev/sw.js
  5. 5 5
      package.json

+ 36 - 0
examples/dev/index.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>uppy</title>
+  </head>
+  <body>
+    <style>
+      main {
+        padding-top: 100px;
+        text-align: center;
+      }
+
+      #upload-form {
+        max-width: 400px;
+        margin: auto;
+        text-align: left;
+      }
+    </style>
+    <main>
+      <h1>Uppy is here</h1>
+
+      <form id="upload-form" action="/">
+        <button type="button" id="pick-files">Pick Files</button><br>
+        True ? <input type="checkbox" name="check_test" value="1" checked><br>
+        Something: <input type="text" name="yo" value="1"><br>
+        <input type="hidden" name="bla" value="12333"><br>
+        <button type="submit">Submit</button>
+      </form>
+    </main>
+
+    <link href="uppy.min.css" rel="stylesheet">
+    <script src="bundle.js"></script>
+  </body>
+</html>

+ 65 - 0
examples/dev/main.js

@@ -0,0 +1,65 @@
+const Uppy = require('./../../packages/@uppy/core/src')
+const Dashboard = require('./../../packages/@uppy/dashboard/src')
+const Instagram = require('./../../packages/@uppy/instagram/src')
+const Dropbox = require('./../../packages/@uppy/dropbox/src')
+const GoogleDrive = require('./../../packages/@uppy/google-drive/src')
+const Url = require('./../../packages/@uppy/url/src')
+const Webcam = require('./../../packages/@uppy/webcam/src')
+const Tus = require('./../../packages/@uppy/tus/src')
+const Form = require('./../../packages/@uppy/form/src')
+
+const TUS_ENDPOINT = 'https://master.tus.io/files/'
+
+const uppy = Uppy({
+  debug: true,
+  meta: {
+    username: 'John',
+    license: 'Creative Commons'
+  }
+})
+  .use(Dashboard, {
+    trigger: '#pick-files',
+    // inline: true,
+    // target: 'body',
+    metaFields: [
+      { id: 'license', name: 'License', placeholder: 'specify license' },
+      { id: 'caption', name: 'Caption', placeholder: 'add caption' }
+    ],
+    showProgressDetails: true,
+    proudlyDisplayPoweredByUppy: true,
+    note: '2 files, images and video only'
+  })
+  .use(GoogleDrive, { target: Dashboard, serverUrl: 'http://localhost:3020' })
+  .use(Instagram, { target: Dashboard, serverUrl: 'http://localhost:3020' })
+  .use(Dropbox, { target: Dashboard, serverUrl: 'http://localhost:3020' })
+  .use(Url, { target: Dashboard, serverUrl: 'http://localhost:3020' })
+  .use(Webcam, { target: Dashboard })
+  .use(Tus, { endpoint: TUS_ENDPOINT })
+  .use(Form, { target: '#upload-form' })
+  // .use(GoldenRetriever, {serviceWorker: true})
+
+uppy.on('complete', (result) => {
+  if (result.failed.length === 0) {
+    console.log('Upload successful 😀')
+  } else {
+    console.warn('Upload failed 😞')
+  }
+  console.log('successful files:', result.successful)
+  console.log('failed files:', result.failed)
+})
+
+/* eslint-disable compat/compat */
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker
+    .register('/sw.js')
+    .then((registration) => {
+      console.log('ServiceWorker registration successful with scope: ', registration.scope)
+    })
+    .catch((error) => {
+      console.log('Registration failed with ' + error)
+    })
+}
+/* eslint-enable */
+
+var modalTrigger = document.querySelector('#pick-files')
+if (modalTrigger) modalTrigger.click()

+ 16 - 0
examples/dev/package.json

@@ -0,0 +1,16 @@
+{
+  "dependencies": {
+    "aliasify": "^2.1.0",
+    "babel-core": "^6.26.3",
+    "babelify": "^8.0.0",
+    "watchify": "^3.11.0"
+  },
+  "scripts": {
+    "watch": "watchify -t babelify -t aliasify main.js -o bundle.js -vd"
+  },
+  "aliasify": {
+    "aliases": {
+      "@uppy": "../../packages/@uppy"
+    }
+  }
+}

+ 61 - 0
examples/dev/sw.js

@@ -0,0 +1,61 @@
+/* globals clients */
+
+const fileCache = Object.create(null)
+
+function getCache (name) {
+  if (!fileCache[name]) {
+    fileCache[name] = Object.create(null)
+  }
+  return fileCache[name]
+}
+
+self.addEventListener('install', (event) => {
+  console.log('Installing Uppy Service Worker...')
+
+  event.waitUntil(Promise.resolve()
+    .then(() => self.skipWaiting()))
+})
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(self.clients.claim())
+})
+
+function sendMessageToAllClients (msg) {
+  clients.matchAll().then((clients) => {
+    clients.forEach((client) => {
+      client.postMessage(msg)
+    })
+  })
+}
+
+function addFile (store, file) {
+  getCache(store)[file.id] = file.data
+  console.log('Added file blob to service worker cache:', file.data)
+}
+
+function removeFile (store, fileID) {
+  delete getCache(store)[fileID]
+  console.log('Removed file blob from service worker cache:', fileID)
+}
+
+function getFiles (store) {
+  sendMessageToAllClients({
+    type: 'uppy/ALL_FILES',
+    store: store,
+    files: getCache(store)
+  })
+}
+
+self.addEventListener('message', (event) => {
+  switch (event.data.type) {
+    case 'uppy/ADD_FILE':
+      addFile(event.data.store, event.data.file)
+      break
+    case 'uppy/REMOVE_FILE':
+      removeFile(event.data.store, event.data.fileID)
+      break
+    case 'uppy/GET_FILES':
+      getFiles(event.data.store)
+      break
+  }
+})

+ 5 - 5
package.json

@@ -109,16 +109,16 @@
     "travis:deletecache": "travis cache --delete",
     "watch:css": "onchange 'packages/**/*.scss' --initial --verbose -- npm run build:css",
     "watch:js": "onchange 'packages/{@uppy/,}*/src/**/*.js' --initial --verbose -- npm run build:bundle",
+    "watch:js:lib": "onchange 'packages/{@uppy/,}*/src/**/*.js' --initial --verbose -- npm run build:lib",
     "watch": "npm-run-all --parallel watch:js watch:css",
     "watch:fast": "npm-run-all --parallel watch:css web:preview",
-    "watch:example:browsersync": "browser-sync start --server examples/bundled-example --port 3452 --serveStatic packages/uppy/dist --files \"examples/bundled-example/bundle.js, packages/uppy/dist/uppy.min.css\"",
-    "watch:example:js": "cd examples/bundled-example && npm run watch",
-    "watch:example": "npm-run-all --parallel watch:example:js watch:css watch:example:browsersync",
-    "dev": "npm-run-all --parallel watch:example:js watch:css watch:example:browsersync",
+    "dev:browsersync": "browser-sync start --no-open --no-ghost-mode false --server examples/dev --port 3452 --serveStatic packages/uppy/dist --files \"examples/dev/bundle.js, packages/uppy/dist/uppy.min.css, packages/uppy/lib/**/*\"",
+    "dev:js": "cd examples/dev && npm run watch",
+    "dev": "npm-run-all --parallel start:companion dev:js watch:css watch:js:lib dev:browsersync",
+    "dev:no-companion": "npm-run-all --parallel dev:js watch:css watch:js:lib dev:browsersync",
     "web:build": "cd website && node update.js && ./node_modules/.bin/hexo generate --silent && node build-examples.js",
     "web:clean": "cd website && ./node_modules/.bin/hexo clean",
     "web:deploy": "npm-run-all web:install web:disc web:build && ./bin/web-deploy",
-    "web:generated-docs": "cd website && node node_modules/documentation/bin/documentation.js readme ../src/index.js --readme-file=src/docs/api.md --section 'Uppy Core & Plugins' -q --github -c doc-order.json",
     "web:disc": "node ./bin/disc.js",
     "web:install": "cd website && npm install",
     "web:bundle:update:watch": "onchange 'packages/uppy/dist/**/*.css' 'packages/uppy/dist/**/*.js' --initial --verbose -- node website/update.js",