{"id":20810213,"url":"https://github.com/sencha/gen-it","last_synced_at":"2025-05-07T08:24:21.496Z","repository":{"id":46597819,"uuid":"299676415","full_name":"sencha/gen-it","owner":"sencha","description":null,"archived":false,"fork":false,"pushed_at":"2021-10-04T14:49:49.000Z","size":28174,"stargazers_count":3,"open_issues_count":0,"forks_count":5,"subscribers_count":4,"default_branch":"7.4.x","last_synced_at":"2025-03-31T08:07:09.771Z","etag":null,"topics":[],"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/sencha.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}},"created_at":"2020-09-29T16:34:04.000Z","updated_at":"2022-05-30T11:57:32.000Z","dependencies_parsed_at":"2022-07-20T18:32:33.116Z","dependency_job_id":null,"html_url":"https://github.com/sencha/gen-it","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/sencha%2Fgen-it","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sencha%2Fgen-it/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sencha%2Fgen-it/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sencha%2Fgen-it/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sencha","download_url":"https://codeload.github.com/sencha/gen-it/tar.gz/refs/heads/7.4.x","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252840388,"owners_count":21812298,"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-11-17T20:21:05.586Z","updated_at":"2025-05-07T08:24:21.475Z","avatar_url":"https://github.com/sencha.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gen-it\n\nThis Readme documents how to use the gen-it.js tool and the process to re-generate a new set of npm packages for all 3 bridge products: \n- ExtAngular\n- ExtWebComponents\n- ExtReact\n\n**NOTE: a ./ in front of any file or folder represents this project path (the one with the README.md)**\n\n## Step 1 - Acquire the latest version/branch of the SDK from https://github.com/extjs/SDK\n\n- create a new folder where SDK will be downloaded - this readme will refer to it as {sdkroot}\n  - {sdkroot} = folder where SDK will be downloaded\n- cd to {sdkroot}\n- run: git clone https://github.com/extjs/SDK\n\n## Step 2 - Generate the DOXI files for classic and modern toolkits\n\n**NOTE: root folder of sdk is {sdkroot}\n\nto produce: ./AllClassesFiles/docs/classic/classic-all-classes-flatten.json\n\n### 2.1 - create the following folders in this project (the one with this README.md)\n  - ./AllClassesFiles\n  - ./AllClassesFiles/docs\n  - ./AllClassesFiles/docs/classic\n  - ./AllClassesFiles/docs/modern\n\n### 2.2 - Classic Doxi\n- cd {sdkroot}/SDK/docs/classic\n- run: sencha doxi build all-classes-flatten\n\n**NOTE: file is built to (output): {sdkroot}/SDK/build/docs/classic/classic-all-classes-flatten.json**\n\n### 2.3 - Modern Doxi\n- copy this file to ./AllClassesFiles/docs/classic/\n\nto produce: AllClassesFiles/modern/modern-all-classes-flatten.json\n\n- cd {sdkroot}/SDK/docs/modern\n- run: sencha doxi build all-classes-flatten\n\n**NOTE: file is built to: {sdkroot}/SDK/build/docs/modern/cmodern-all-classes-flatten.json**\n\n- copy this file to ./AllClassesFiles/docs/modern/\n\n## Step 3 - change globals (in globals.js)\n  - global['ExtVersion'] = '7.3.0' (or whatever new version is)\n  - optional - global['AllClassesFolder'] = './'\n  - optional - global[\"generatedFolders\"] = \"./GeneratedFolders/\";\n\nchange old version (7.3.0) to new version\n- global['ExtVersion'] (as mentioned above)\n- all references in the filetemplates folder\n\n## Step 4 - install npm packages\n\n(the following is run in the root folder of this project)\n- run: npm install\n\n## Step 5 - generate npm packages for webcomponents\n\n(the following is run in the root folder of this project)\n\n- run: npm run modern-extwebcomponents\n- run: npm run classic-extwebcomponents\n\n  Generated npm packages are at: ./GeneratedFolders/blank/\n  - ext-web-components-modern\n  - ext-web-components-classic\n\n## Step 6 - publish or link 2 web-component packages\n\nSince the Ext-Angular and ExtReact rely on the web-components packages being npm published,\nyou must publish these 2 packages first:\n\n1. Change into GeneratedFolders/blank/\u003cpackage_name/\u003e and run `npm install`\n2. Run the publish commands:\n- run: npm publish ext-web-components-modern\n- run: npm publish ext-web-components-classic\nor\n- run: npm link ext-web-components-modern\n- run: npm link ext-web-components-classic\n\n## Step 7 - generate npm packages for extreact and extangular\n\n(the following is run in the root folder of this project)\n\n- run: npm run modern-extreact\n- run: npm run modern-extangular\n- run: npm run classic-extreact\n- run: npm run classic-extangular\n\n  Generated npm packages are at: ./GeneratedFolders/blank/\n  - ext-react-modern\n  - ext-angular-modern\n  - ext-react-classic\n  - ext-angular-classic\n\n## Step 8 - npm install 2 ext-react packages\n\n- cd to ./GeneratedFolders/blank/ext-react-modern\n- run: npm install\n- run: npm publish\n\n- cd to ./GeneratedFolders/blank/ext-react-classic\n- run: npm install\n- run: npm publish\n\n## Step 9 - publish or link ext-angular-classic package\n\n- cd to ./GeneratedFolders/blank/ext-angular-classic\n- run: npm install\n- run: npm run packagr (this will create a ./dist folder)\n- copy ./bin ./dist/bin\n- copy ./postinstall.js ./dist/postinstall.js\n- cd to ./dist\n- add scripts entry to ./dist/package.json\n```\n  \"scripts\": {\n    \"postinstall\": \"node ./postinstall.js\"\n  }\n```\n- add bin entry to ./dist/package.json\n```\n  \"bin\": {\n    \"ext-angular\": \"./bin/ext-angular.js\"\n  },\n```\n- run: npm publish or npm link from the ./dist folder\n\n## Step 10 - publish or link ext-angular-modern package\n\n- cd to ./GeneratedFolders/blank/ext-angular-modern\n- run: npm install\n- run: npm run packagr (this will create a ./dist folder)\n- copy ./bin ./dist/bin\n- copy ./postinstall.js ./dist/postinstall.js\n- cd to ./dist\n- add scripts entry to ./dist/package.json\n```\n  \"scripts\": {\n    \"postinstall\": \"node ./postinstall.js\"\n  }\n```\n- add bin entry to ./dist/package.json\n```\n  \"bin\": {\n    \"ext-angular\": \"./bin/ext-angular.js\"\n  },\n```\n- run: npm publish or npm link from the ./dist folder\n\n\n# Project Documentation\n\n## gen-it tool\n\nstandard project files\n\n- ./package.json (npm package file)\n- ./package-lock.json (npm package lock file)\n- ./README.md  (this file)\n\n\ngenIt utility is 3 files\n\n- ./genIt.js\n- ./genItUtils.js\n- ./globals.js\n\nfolders auto-generated\n- ./GeneratedFolders\n- ./node-modules\n\nfolder documentation\n- ./filetemplates (where templates for all generated files are stored)\n- ./npmpackage (starter files for the npm process)\n- ./XTemplate (Ext JS XTemplate code used by the genIt.js utility)\n\ndescription of command line (which is used in the scripts section of package.json)\n\nnode ./genIt.js blank modern\n\n1st is node (the app runtime)\n2nd is the js file to run\n3rd is the suffix (blank means no suffix added to name)\n4th is toolkit (classic or modern)\n\n# Sencha Ext JS Bridges Project(s) Architecture Documentation \nA guide on how ExtAngular and ExtReact consume ExtWebComponents (EWC) and how the packages are associated to each other (dependencies).\n\n## Products: \n1. ExtAngular\n2. ExtReact\n3. ExtWebComponents\n\n## High Level\nThere are 10 packages that need to be updated. \n\nPackages built using *gen-it.js*:\n* ext-angular-classic\n* ext-angular-modern\n* ext-react-classic\n* ext-react-modern\n* ext-web-components-classic\n* ext-web-components-modern\n\nPackages build using *theme-and-engine.js*\next-classic-runtime\next-modern-runtime\n\nPackages built from the existing bridge [ext-react-repo](https://github.com/sencha/ext-react):\n* cra-template-ext-react-classic\n* cra-template-ext-react-modern\n\nThere are versions of ExtReact, ExtAngular and ExtWebComponents for both the classic and modern toolkits. Here is a list of the components:\n\n* ext-web-components-classic\n* ext-web-components-modern\n* ext-angular-classic\n* ext-angular-modern\n* ext-react-classic\n* ext-react-modern\n\n**NOTE: ext-angular and ext-react require the respective ext-web-components package (by toolkit) in order to run. As such, both products package.json file includes a dependencies reference, similar to the following**\n```\n   \"@sencha/ext-web-components-classic\": \"~7.3.0\",\n   ```\n\n## gen-it.js tool\n\nThe list of components above can be generated with the ‘gen-it.js’ tool available here: https://github.com/sencha/gen-it \t\nDocumentation on using this tool is available here: https://github.com/sencha/gen-it/blob/master/README.md\n\nThis tool will generate npm packages for all 6 components (above), which are then ready to be published to npm.\n\n## theme-and-engine.js tool\n\nThere is also a second tool: themes-and-engine.js available at the following link:https://github.com/sencha/themes-and-engine\nDocumentation on using this tool is available here: https://github.com/sencha/themes-and-engine/blob/master/README.md\n\nThis tool will generate 2 npm packages with the following engine and theme files\n\n1. `ext-classic-runtime` containing:\n    - `classic.engine.enterprise.js`\n    - Material folder (for the material theme)\n2. `ext-modern-runtime`\n    - `modern.engine.enterprise.js`\n    - Material folder (for the material theme)\n\nThese 2 npm packages (above) contain the ExtJS engine and theme needed for the products, with these, no custom Ext JS webpack plugin is need\n\n## Special considerations when building `ext-angular` and `ext-react` toolkit packages\nBoth `ext-angular-[toolkit]` and `ext-react-[toolkit]` contain a `postinstall.js` file (which is used for npm post install).  This file will look for the above packages, and, if found, will copy the engine and theme files needed for both `Angular CLI` and `create-react-app` (native React) generated applications. \n\n**NOTE: during the development process, it is critical that the bin/ directory and postinstall.js are copied into each packages dist folder and that package.json is configured to run the post install hook**\n\n`create-react-app` - copies to the ./public folder and modifies ./public/index.html.\n`Angular CLI` - copies to the root of the project and make entries in the angular.json file\n\n### CRA (create-react-app) Templates\n\nFor ExtReact, there are 2 cra templates (one for modern and one for classic) available here:\n- [classic](https://github.com/sencha/ext-react/tree/ext-react-7.3.x/packages/cra-template-ext-react-classic)\n- [modern](https://github.com/sencha/ext-react/tree/ext-react-7.3.x/packages/cra-template-ext-react-modern)\n\nFor both of these packages, a new version of Ext JS requires changing the version numbers in both packages files, specifically:\n* package.json\n* template.json\n\n\n## Generating JSON Descriptors for the Web Components.\nGen It can be used to generate the JSON Descriptor file for each of the Ext Web Component which contains the information such as Properties, method and events etc about the Web Component. Follow the following steps -\n\n1) Generate the doxi JSON files as explained in first 3 steps at the start of this ReadMe file and place them in their respective folders.\n\n2) - Classic EWC Descriptors\n- run: npm run classic-ewc-jsondescriptors\n\n3) - Modern EWC Descriptors\n- run: npm run modern-ewc-jsondescriptors\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsencha%2Fgen-it","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsencha%2Fgen-it","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsencha%2Fgen-it/lists"}