{"id":17322004,"url":"https://github.com/yukilzw/prince-cli","last_synced_at":"2026-01-18T21:04:29.531Z","repository":{"id":57330485,"uuid":"95614529","full_name":"yukilzw/prince-cli","owner":"yukilzw","description":":hammer_and_wrench: Command SPA scaffolding with dynamic loading and socket  observable","archived":false,"fork":false,"pushed_at":"2020-11-20T02:18:37.000Z","size":257,"stargazers_count":21,"open_issues_count":0,"forks_count":30,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-10-29T06:54:32.270Z","etag":null,"topics":["babel7","cli","commander","koa2","react","webpack4","ws"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":false,"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/yukilzw.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":"2017-06-28T01:09:47.000Z","updated_at":"2022-09-08T06:17:35.000Z","dependencies_parsed_at":"2022-09-13T17:41:12.073Z","dependency_job_id":null,"html_url":"https://github.com/yukilzw/prince-cli","commit_stats":null,"previous_names":["yukilzw/prince"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/yukilzw/prince-cli","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yukilzw%2Fprince-cli","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yukilzw%2Fprince-cli/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yukilzw%2Fprince-cli/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yukilzw%2Fprince-cli/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yukilzw","download_url":"https://codeload.github.com/yukilzw/prince-cli/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yukilzw%2Fprince-cli/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28550498,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T20:59:07.572Z","status":"ssl_error","status_checked_at":"2026-01-18T20:59:02.799Z","response_time":98,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["babel7","cli","commander","koa2","react","webpack4","ws"],"created_at":"2024-10-15T13:40:39.507Z","updated_at":"2026-01-18T21:04:29.514Z","avatar_url":"https://github.com/yukilzw.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# About prince\n![license](https://img.shields.io/badge/license-MIT-green.svg) ![node](https://img.shields.io/badge/node-8.0%2B-brightgreen.svg)\n\nfast \u0026 light React SPA mobile tooling.\n- connect Redux.\n- webpack-dev-server provides hot reload.\n- Starting new programe at localhost(local mode); online programe code develop by proxy of localhost(debug mode).\n- page turning animation imitates native app.\n- each page is splited the trunks for router, and connect reducers with global store when it is onloaded.\n- support get、post、jsonp、webSocket mock function, support requesting localhost in the debug mode.\n\n### Use command\n- use `npm i prince-cli -g` install prince-cli for global\n- use `prince new myApp` create new react SPA app from local template\n- use `prince dev local` start local mode\n- use `prince build` create release bundle\n- use `prince add xxx` create a new page(xxx is your page name)\n- use `npm test` run unit testing\n \n### Development rule\n    ├── mock\n    │   ├── mock.api.js         // http mock\n    │   ├── socket.api.js       // websocket mock\n    │   └── data\n    │       ├── mockData.js     // rest mock data\n    │       └── socketData.js   // websocket mock data\n    ├── src\n    │   ├── common                  // common function\n    │   │   ├── action              // actions\n    │   │   ├── assests             // static files\n    │   │   ├── component           // components\n    │   │   ├── less                // styles\n    │   │   ├── reducers            // stores\n    │   │   └── service             // methods\n    │   ├── page\n    │   │   ├── firstPage           // page 1\n    │   │   │   ├── action              // actions\n    │   │   │   ├── assests             // static files\n    │   │   │   ├── component           // components\n    │   │   │   ├── less                // styles\n    │   │   │   ├── reducers            // stores\n    │   │   │   ├── service             // methods\n    │   │   │   ├── firstPage.test.js   // unit test\n    │   │   │   └── index.js            // page entry\n    │   │   ├── secondPage          // page 2   \n    │   │   └── thirdPage           // page 3\n    │   └── route\n    │       ├── router.js           // router core\n    │       └── config.js           // router config\n    ├── entry.js                // main entry\n    ├── package.json            // npm config\n    ├── .eslintrc               // Eslint config\n    └── temp.html               // template\n  \n### Development guide\n- in the path of pages use`prince add xxx`to create new page template\u003cbr/\u003e\n\n- add page routers at route/config.js (you can change the port anyway)：exemple \u003cbr/\u003e\nstatic files server：`http://localhost:4396` (static files and hot reload)\u003cbr/\u003e\nhttp requests server：`http://localhost:4397` (return ajax and jsonp mock request)\u003cbr/\u003e\nwebSocket server：`ws://localhost:4398` (send and push socket mock message)\u003cbr/\u003e\n\n- http requests\n``` \nimport { commonService } from '@common/service';\n/**\n* @description GET,POST,JSONP request\n* @param {string} url request url\n* @param {obj} data request data\n* @param {obj} options(optional)\n*/\ncommonService.get('/mockGetRest', null, { mock: true }).then(res =\u003e {\n      console.log('GET response:', res);\n});\ncommonService.post('/mockPostRest', { a: 1 }).then(res =\u003e {\n      console.log('POST response:', res);\n});\ncommonService.jsonp('/mockJsonpRest', { a: 2 }).then(res =\u003e {\n      console.log('JSONP response:', res);\n});\n``` \nyou can inject`{ mock, headers }`at the third parameter to get mock server return during debug mode, `headers`config will add custom request headers, if you request url start with `http` or `https`, it will use absolute path, otherwise will use relative path.\n\n- send or push webSocket message\n``` \nimport { commonService } from '@common/service';\n/**\n* @description subscribe socket message\n* @param {string} sign name\n* @param {obj} data callback data\n*/\ncommonService.ws.subscribe('lzw', data =\u003e {\n\t//...\n});\ncommonService.ws.send({ a: 3 });\n``` \nfirst param of subscribe method define the sign which is confirmed by server side document,common\nService create event subscribe for each sign,when the messages are sended to client, it will just trgger the callback that bind the same sign.\n\n- development and debug data mock\u003cbr/\u003e\n\nhttp mock:\n``` \nconst mockData = require('./data/mockData');\n\nconst mockApi = new Map();\n\n/**\n* @description rest api mock\n* @example mockApi.set([method, url, timeout], response);\n* @param {string} method api type, support'GET','POST','JSONP'\n* @param {string} url api url path\n* @param {number} timeout request return delay (optional)\n* @param {object} response request return data\n*/\nmockApi.set(['GET', '/mockGetRest', 2000], mockData.mockGetRest);\nmockApi.set(['POST', '/mockPostRest', 200], mockData.mockPostRest);\nmockApi.set(['JSONP', '/mockJsonpRest'], mockData.mockJsonpRest);\n\nmodule.exports = mockApi;\n``` \n\nwebScoket mock:\n``` \nconst socketData = require('./data/socketData');\n\nconst socketApi = new Map();\n\n/**\n* @description webSocket msg mock\n* @example mockApi.set([type, time], response);\n* @param {string} type push message times,'timeout' for once，'interval' for interval\n* @param {number} time interval time\n* @param {object} response socket push data\n*/\nsocketApi.set(['timeout', 2500], socketData.wzl);\nsocketApi.set(['interval', 1000 * 20], socketData.lzw);\n\nmodule.exports = socketApi;\n``` \n\n- page turning\n\n``` \nimport { commonService } from '@common/service';\n\ncommonService.pageJump('push', {\n      pathname: '/thirdPage'\n});\ncommonService.pageBack('go', -1);\n``` \nadd turning animation liked native is based on react-router, `pageJump`is animate to next page, `pageBack`is animate previous page, first param of this method is react-router history proto method, and the second param is history method options.\n\n- common folder content page component actions, reducers, methods needed many times, use path like`@common/`in the code.\n- `debug`mode require that you shuold build server side bufore using it, then edit file script/config.js and`build` program. At last commit dist folder to server side.\u003cbr/\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyukilzw%2Fprince-cli","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyukilzw%2Fprince-cli","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyukilzw%2Fprince-cli/lists"}