{"id":14967442,"url":"https://github.com/david-else/zen-typescript-starter-project","last_synced_at":"2025-10-25T19:31:04.041Z","repository":{"id":103073903,"uuid":"181679155","full_name":"David-Else/zen-typescript-starter-project","owner":"David-Else","description":" Modern and minimalist TypeScript front end starter project using ES6 modules with optional bundling. Fully customizable. ","archived":false,"fork":false,"pushed_at":"2019-12-09T15:13:03.000Z","size":71,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-10T22:42:56.175Z","etag":null,"topics":["closure-compiler","mochajs","rollup-js","starter-project","typescript"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/David-Else.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-04-16T11:49:37.000Z","updated_at":"2022-03-24T07:28:11.000Z","dependencies_parsed_at":"2023-03-23T04:50:25.420Z","dependency_job_id":null,"html_url":"https://github.com/David-Else/zen-typescript-starter-project","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/David-Else%2Fzen-typescript-starter-project","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/David-Else%2Fzen-typescript-starter-project/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/David-Else%2Fzen-typescript-starter-project/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/David-Else%2Fzen-typescript-starter-project/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/David-Else","download_url":"https://codeload.github.com/David-Else/zen-typescript-starter-project/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219865150,"owners_count":16555931,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["closure-compiler","mochajs","rollup-js","starter-project","typescript"],"created_at":"2024-09-24T13:38:03.986Z","updated_at":"2025-10-25T19:31:03.657Z","avatar_url":"https://github.com/David-Else.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# zen-typescript-starter-project\n\nModern and minimalist TypeScript front end starter project using ES6 modules\nwith optional bundling. Fully customizable.\n\nYou might not need an advanced set up like\n[create-react-app](https://github.com/facebook/create-react-app) even if you are\nusing React, this project is for people who:\n\n- Want to use only what is needed and have total control over their development\n- Don't have to support legacy browsers and resent having the bloat and cruft\n  force fed to them\n- Enjoy fine tuning their own development environment without having to worry\n  about a one-way eject option or insanely complex webpack scripts.\n\n## Tooling\n\nThis starter project uses the best and most minimal tools to make development a\ndelight.\n\nUses [ESlint](https://eslint.org/),\n[typescript-eslint](https://github.com/typescript-eslint/typescript-eslint) /\n[eslint-config-prettier](https://github.com/prettier/eslint-config-prettier) for\nlinting.\n\nUses [Mocha](https://mochajs.org/) with [jsdom](https://github.com/jsdom/jsdom)\nand Node.js's built in strict [assert](https://nodejs.org/api/assert.html) for\ntests.\n\nUses [rollup.js](https://rollupjs.org/guide/en) and\n[rollup-plugin-closure-compiler](https://github.com/ampproject/rollup-plugin-closure-compiler)\nfor optional bundling and minification if required.\n\n## Usage\n\n### Installation\n\n`git clone https://github.com/David-Else/zen-typescript-starter-project`\n\n`npm install` or pnpm/yarn install\n\n### Run NPM Scripts.\n\nUse the NPM scripts via the Visual Studio Code interface or command line.\n\nTypical use might be run 'start-typescript-development' to start compilation,\ntesting, and linting. This will continuously convert all newly edited TypeScript\nfiles to .js files in the same directory. Use the recommended Visual Studio Code\nsettings below to make the compiled .js files invisible in the editor.\n\n### Live Preview\n\nRun your development server of choice to start the live preview in the browser.\n\nTo use ES6 Module imports for live browser preview AND TypeScript compilation\nyou must import files with the `.js` extension:\n\n```\nimport Example from './classes/example.js';\n```\n\nTypeScript resolves the types from the .ts file, and you get browser\ncompatibility. It is a bit of a workaround which is discussed here:\nhttps://github.com/Microsoft/TypeScript/issues/16577#\n\n### Testing\n\nMocha is run using `--require esm --require ./test/setup-jsdom.js`, so ES6\nModules work out of the box, and all jsdom settings can be edited in the\n`setup-jsdom.js` file.\n\nThe tests are run on the compiled `.js` files, so make sure you are running in\nTSC watch mode or you might find yourself running old versions of the tests.\n\n### Bundling\n\nRun the 'build-bundle' script and rollup.js and closure compiler will create\nyour bundle automatically in the `dist` directory. You can change the file\nreferences to point to the `dist` directory in `index.html`, they are provided\nin commented out form.\n\nClosure compiler is set by default to `SIMPLE` mode in the `rollup.config.js`,\nand an ES6 Module is created rather than an IIFE, so don't forget to import it\nas a module or it may fail or you will loose the advantage of strict mode.\n\nClosure compiler also has ADVANCED mode which can be set by:\n\n```\ncompilation_level: 'ADVANCED',\n```\n\nbut it will most likely require you to re-write parts of your code and is\nconsidered an advanced topic. It will create the smallest bundle sizes known to\nhumanity if you want to try it.\n\nThe zen-typescript-starter-project bundling facilities are the most basic and\nimportant, tree shaking and minification. If you want to expand on that then you\ncan edit `rollup.config.js` and install additional extensions as needed.\n\n## Recommended [Visual Studio Code](https://code.visualstudio.com/) extensions\n\n`esbenp.prettier-vscode` `ritwickdey.liveserver`\n\n## Recommended Visual Studio Code `settings.json`\n\n```\n  // Typescript, stop compiled .js and .map files showing in explorer\n  \"files.exclude\": {\n    \"**/*.js\": { \"when\": \"$(basename).ts\" },\n    \"**/*.js.map\": true\n  },\n```\n\n## Additional Anti-bloat Recommendations\n\n[pnpm - Fast, disk space efficient package manager](https://pnpm.js.org/)\n\n[pika - Find modern packages on npm. Get faster, smaller JavaScript bundles](https://www.pikapkg.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavid-else%2Fzen-typescript-starter-project","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavid-else%2Fzen-typescript-starter-project","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavid-else%2Fzen-typescript-starter-project/lists"}