/svelte-demo

Testing Svelte.technology

Primary LanguageHTML

Svelte Demo

Testing out Svelte. See the TODO below.

http://svelte-demo.maclure.info/

Running

Install some useful global & local deps:

npm install -g http-server eslint eslint-plugin-html npm-check-updates
npm install

(Re)Generate test data:

node scripts/generate-data.js

Build initial bundle.js, run server:

npm start

And open http://127.0.0.1:8080

While server is running, run app (rollup) in watch mode:

npm run watch

TODO - Sooner

  • Initial setup with 1k rows, delete row functionality
  • Deploy to github
  • Split HelloWorld into a couple of subcomponents
  • Add a build system (rollup), update readme
  • Move all data modification code into main.js (out of components) (leaving isLoading alone for now)
  • Add sort asc/desc feature in table header.
  • Refactor "processed items" (sorted & filtered) into computed property.
  • Setup eslint with some defaults.
  • Add rollup-watch (https://github.com/rollup/rollup-watch) for dev
  • Add a search/filter component above table
  • Add a basic router, add "pages/routes" (splash screen, Users table) - use History API (pushState)
  • Remember filtering and sorting between routes (main.js)
  • unicode icons for delete, edit
  • Config.js for shared/common config values between components
  • Support lazy load of items for direct page load of edit route (#EditUser/1)
  • Add support for loading commonjs node_modules (lodash isEqual, etc)
  • Add element for PWA audit
  • Add a user edit screen, combine with router, save, route to ListUsers, success message
  • Add https://shoelace.style/ for base css L&F (see https://shoelace.style/source/css/variables.css)
  • Refactor messages into generic system
  • Add service worker for Chrome Audit (Lighthouse) (https://github.com/GoogleChrome/sw-precache) (Need HTTPS first!)
  • Add isDirty (or... isValid?) computed property on EditUser form, to disable/enable the Save button (refs passed into computed property?)
  • Refactor homebrew routing into es6 module
  • Edit user - client validation (homebrew)
  • Reorganise code into src/components, src/modules
  • Concatenate css into a single bundle.css (rename existing bundle.css into components.css)
  • Refactor edit user to add user, auto-inc the id
  • Replace html table with a grid of "cards" or similar (https://gridbyexample.com/patterns/header-asmany-footer/)
  • Update readme with features list

TODO - Later

  • Persist data.json in localStorage, let user reset data at will (make it feel like there's a server)
  • Testing main.js data functions independently of components (SvelteDemoApp mock?) (https://github.com/ModuleLoader/es-module-loader)
  • unit tests for generate-data
  • Update watch feature to sw-precache as well? (PR on rollup/rollup-watch?)
  • Client pagination feature, see if it can be generic
  • Testing components individually (Mocha?)
  • uglify the js code for prod - see https://github.com/rollup/rollup-starter-app/blob/master/rollup.config.js
  • bundle/minify css output to 1 asset?
  • Use svelte-router or router5, see if it works better than homebrew (if keep homebrew, refactor to mixin/import/node_module)
  • Add a11y test automation and update app with a11y
  • Support older browsers using babel (see rollup-starter-project) (css vars issue)
  • Load package.json version, display on page
  • Extend homebrew validation to support object-based validation, eg User.validate(user) or similar))
  • Refactor main.js into smaller files, grouped by activity (eg User/s.js module)