{"id":16216008,"url":"https://github.com/kc596/jsgames","last_synced_at":"2025-06-29T17:05:20.726Z","repository":{"id":167831908,"uuid":"292596411","full_name":"kc596/jsgames","owner":"kc596","description":"Just an experiment","archived":false,"fork":false,"pushed_at":"2020-09-14T14:47:45.000Z","size":56,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-07T22:42:39.064Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/kc596.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":"2020-09-03T14:39:52.000Z","updated_at":"2021-01-06T10:04:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"73dd7a64-8db7-4eba-ab7e-4ddf0964bd1e","html_url":"https://github.com/kc596/jsgames","commit_stats":null,"previous_names":["kc596/jsgames"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kc596/jsgames","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kc596%2Fjsgames","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kc596%2Fjsgames/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kc596%2Fjsgames/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kc596%2Fjsgames/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kc596","download_url":"https://codeload.github.com/kc596/jsgames/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kc596%2Fjsgames/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262632335,"owners_count":23340214,"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":[],"created_at":"2024-10-10T11:17:41.749Z","updated_at":"2025-06-29T17:05:20.696Z","avatar_url":"https://github.com/kc596.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jsgames\n\n### Game 1\n\n- Prints a starry pattern in console.\n\n\u003cpre\u003e\nn = 7 \n*                        * *\n* *                    * * *\n* * *                * * * *\n* * * *            * * * * *\n* * * * *        * * * * * *\n* * * * * *    * * * * * * *\n* * * * * * ** * * * * * * *\n* * * * * * *  * * * * * * *\n* * * * * *      * * * * * *\n* * * * *          * * * * *\n* * * *              * * * *\n* * *                  * * *\n* *                      * *\n*                          *\n\u003c/pre\u003e\n\n### Game 2\n\n- Prints another starry pattern in console. Uses starOrSpace() function from game 1.\n\n\u003cpre\u003e\nn = 7\n* * * * * * *  * * * * * * *\n* * * * * *      * * * * * *\n* * * * *          * * * * *\n* * * *              * * * *\n* * *                  * * *\n* *                      * *\n*                          *\n*                          *\n* *                      * *\n* * *                  * * *\n* * * *              * * * *\n* * * * *          * * * * *\n* * * * * *      * * * * * *\n* * * * * * *  * * * * * * *\n\u003c/pre\u003e\n\n\n### Game 3\n\n- Contains utils for shape and area : circle, rectangle, square, right angled triangle\n\n### Game 4\n\n- Contains utils for volume using area (from game 3) : cube(x), sphere(x)\n\n### Game 5\n\n- Uses fast exponent to expose a function pow3() which calculates power of 3\n\n### Game 6\n\n- Uses game 4 to calc hyperCube(x) = cube(x) * x\n- Uses game5 pow3() to calc pow9()\n- Also uses fastexponent directly to calc pow2()\n- Uses game2 to print pattern for n=5\n\n### Game 7\n\n- Snake game\n\n## Babel\n\nThe main things Babel can do:\n\n- Transform syntax\n- Polyfill features that are missing in your target environment (through @babel/polyfill)\n- Source code transformations (codemods)\n\nBabel is a compiler (source code =\u003e output code). Like many other compilers it runs in 3 stages: parsing, transforming, and printing.\n\nNow, out of the box Babel doesn't do anything. It basically acts like const babel = code =\u003e code; by parsing the code and then generating the same code back out again. You will need to add plugins for Babel to do anything.\n\nInstead of individual plugins, you can also enable a set of plugins in a preset.\n\n\u003e *babel-loader* is used for using babel with webpack build system. \n \n\u003e *@rollup/plugin-babel* is used for using babel with rollup build system.\n\n\n### Ordering matters for each visitor in the plugin.\n\nThis means if two transforms both visit the \"Program\" node, the transforms will run in either plugin or preset order.\n\n- Plugins run before Presets.\n- Plugin ordering is first to last.\n- Preset ordering is reversed (last to first).\n\n### @babel/plugin-transform-runtime\n\nBabel uses very small helpers for common functions such as _extend. By default this will be added to every file that requires it. This duplication is sometimes unnecessary, especially when application is spread out over multiple files.\n\n@babel/plugin-transform-runtime plugin makes all of the helpers will reference the module @babel/runtime to avoid duplication across your compiled output. The runtime will be compiled into your build.\n\nAnother purpose of this transformer is to create a sandboxed environment for your code. If you directly import core-js or @babel/polyfill and the built-ins it provides such as Promise, Set and Map, those will pollute the global scope.\n\nExamples on size is shown below in table :-\n| Plugin | Options | Size (orig./gzip) in B | Time (s) |\n| ------ | ------ | ------ | ------ |\n| - | - | 69385 / 26890| 2.4 |\n| plugin-transform-runtime | default | 54994 / 21806 | 2.1 - 2.2 |\n| plugin-transform-runtime | corejs:3 | 82100 / 31239 | 2.8 |\n| plugin-transform-runtime | helpers:false | 69408 / 26896 | 2.5 |\n| plugin-transform-runtime | regenerator:false | 54969 / 21784 | 2.2 |\n| plugin-transform-runtime | useESModules:true | 54667 / 21673 | 2.2 |\n\n\n### @babel/env preset \n\nExample affect on size of bundle:  \n\n**bugfixes: false** : original size: 26912 / gzipped size: 10483  \n\n**bugfixes: true** : original size: 26685 / gzipped size: 10454  \n\n\nIt is worth pointing out that this reduciton happened when targettig modern browsers.\n\n```js\ntargets: {\n    \"browsers\": [\n        \"Chrome \u003e= 78\",\n        \"ChromeAndroid \u003e= 78\",\n        \"Firefox \u003e= 69\",\n        \"Safari \u003e= 12\",\n    ],\n}\n```\n\nHowever, same code for older targets had no size reduction in our case. It's because it was mostly replacing concat with new way to include variables in string but *`* character is not supported (illegal) in older browsers.\n\n```js\ntargets: {\n    \"browsers\": [\n        \"Chrome \u003e= 40\",\n        \"ChromeAndroid \u003e= 40\",\n        \"Firefox \u003e= 40\",\n        \"Safari \u003e= 9\",\n    ],\n}\n```\n\n**bugfixes: false** : original size: 54342 / gzipped size: 21551  \n\n**bugfixes: true** : original size: 54342 / gzipped size: 21551  \n\n\u003cu\u003e*Sample difference caused by this config:*\u003c/u\u003e\n\n```\nthis.el.style.top = \"\".concat(y, \"px\"); //bugfix: false\nthis.el.style.top = `${y}px`;           //bugfix: true\n```\n\n\n## Webpack\n1. Only updating to Webpack `5.0.0 (beta30)` from `4.41.5` gave little size improvements `~1.5%`\n2. ```$js\n    const experiments = {\n        \"outputModule\": true\n    };\n    ```\n    And setting `output.module : true` in webpack config gives size improvements of `~1%`.\n \n3. Some problem in tree-shaking is there in webpack.\n\n## Rollup\n\nRollup can only do tree-shaking on ES modules\n\n## Few unsupported syntax in older browsers\n\nAnd thus, require polyfills.\n\n- *class* : Firefox 45+, Chrome 49+, Safari 9+. This doesn't require polyfills and are transpiled.\n- *Array.prototype.includes*\n- *Promise.resolve().finally();*\n- *Map*\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkc596%2Fjsgames","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkc596%2Fjsgames","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkc596%2Fjsgames/lists"}