faste-lite-framework

This code framework represents a collaboration between Team 301 and Team Supernova to utilize the the faste-lite functionality within the modular framework approach.

For more information about the faste-lite approach, please reach out to Team Supernova and/or review their documentation, found here.

Framework

Based on multiple iterations with the previous framework version, we have developed an approach to specifically solve the challenges we faced with the initial framework. In the migration to the faste-lite framework, we eliminated our dependency on webpack and shifted to parcel. Further research and testing is needed to best utilize parcel's code-splitting and optimization. This move did solve a few critical requirements for us that were previously outstanding, specifically:

• Internal route management
• i18n functionality
• Further decouples our dependency on the c7-element version vs. the latest Element version.

Structural updates

We did modify our base module framework slightly to make it more easily understandable and universal. With few exceptions these structures are largely optional, so use only the ones you need.

:file_folder: Feature Name - Replace with ACTUAL feature name | - :file_folder: src - Top-level folder for all source code |    | - :file_folder: assets - Stylesheets, shared code, etc. |    |    | - :page_facing_up: i18n.ts - Internationalization support |    |    | - :page_facing_up: router.ts - Internal routing management |    |    | - :page_facing_up: store.ts - Internal store management |    | - :file_folder: components - Feature specific, purpose-built Vue components |    | - :file_folder: configs - Specific table configuration information |    | - :file_folder: locales - i18n translation files |    | - :file_folder: views - Feature specific landing pages, as defined by internal router |    |    | - :page_facing_up: dashboard.vue - Landing page for use with widgets/cards |    |    | - :page_facing_up: table.vue - Landing page for use with table components |    | - :file_folder: widgets - Feature specific cards to populate the dashboard view |    | - :page_facing_up: app.vue - Default application entry point |    | - :page_facing_up: faste.ts - Entry point for building the feature into the accepted bundle |    | - :page_facing_up: index.html - Required for localhost testing |    | - :page_facing_up: shims-modules.d.ts - Module definitions for TypeScript support |    | - :page_facing_up: shims-tsx.d.ts - Required for using TypeScript within SFC | - :page_facing_up: .babelrc - Required by Parcel | - :page_facing_up: .env - Build environment management settings | - :page_facing_up: .gitignore | - :page_facing_up: package-lock.json | - :page_facing_up: package.json | - :page_facing_up: prettier.config.js | - :page_facing_up: README.md | - :page_facing_up: tsconfig.json - TypeScript build/evaluation rules | - :page_facing_up: tslint.json | - :page_facing_up: vue.config.js - Vue build rules

Project scripts

Project setup

npm run setup

npm i && npm ddp

Project cleanup

Clean project and rebuild dependencies npm run clean

npm run clean:dist && npm run clean:modules && npm run setup

Clean out dist folder npm run clean:dist

rm -Rf ./dist

Clear out installed modules npm run clean:modules

rm -Rf ./node_modules && rm package-lock.json

Code cleanup

Run prettier and report npm run prettier

prettier -c --config ./prettier.config.js src/**/*.[jt]s && prettier -c --config ./prettier.config.js src/**/*.vue

Run prettier and fix formatting npm run prettier:fix

prettier -c --config ./prettier.config.js --write src/**/*.[jt]s && prettier -c --config ./prettier.config.js --write src/**/*.vue

Run lint and report npm run lint

tslint -p .

Run lint and fix issues automatically - MAY NOT WORK FOR ALL ISSUES npm run lint

tslint --fix -p .

Run both lint & prettier and report issues npm run format:report

npm run lint && npm run prettier

Run both lint & prettier and report issues npm run format:fix

npm run prettier:fix && npm run lint:fix

Project testing

Localhost testing npm start

parcel src/index.html --target browser --bundle-node-modules --no-source-maps -p 8080 --open

Unit testing npm run test:unit

vue-cli-service test:unit

i18n usage reporting npm run i18n:report

vue-cli-service i18n:report --src './src/**/*.?(ts|vue)' --locales './src/locales/**/*.json'

Build faste-lite module for deployment

npm run build:prod

parcel build src/faste.ts --target browser --bundle-node-modules --detailed-report 30 --no-source-maps --no-content-hash --out-file bundle.js