artyprog / svelte-demo

Testing Svelte.technology

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)
• Concatenate css into a single bundle.css (rename existing bundle.css into components.css)
• Update readme with features list
• 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/)
• Reorganise code into src/components, src/modules

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)