{"id":26107138,"url":"https://github.com/fentas/sails-react","last_synced_at":"2025-10-15T01:48:07.976Z","repository":{"id":15443463,"uuid":"18176273","full_name":"fentas/sails-react","owner":"fentas","description":"Integration of fb react into sailsjs","archived":false,"fork":false,"pushed_at":"2017-07-10T18:45:25.000Z","size":21,"stargazers_count":17,"open_issues_count":3,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-12T20:13:27.275Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fentas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE-MIT","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-03-27T13:14:43.000Z","updated_at":"2023-11-28T14:17:02.000Z","dependencies_parsed_at":"2022-07-13T23:40:41.726Z","dependency_job_id":null,"html_url":"https://github.com/fentas/sails-react","commit_stats":null,"previous_names":["pan-st/sails-react"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fentas%2Fsails-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fentas%2Fsails-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fentas%2Fsails-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fentas%2Fsails-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fentas","download_url":"https://codeload.github.com/fentas/sails-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248625517,"owners_count":21135514,"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":"2025-03-09T22:43:28.465Z","updated_at":"2025-10-15T01:48:02.904Z","avatar_url":"https://github.com/fentas.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# sails-react\nThe aim of this plugin is to make the whole process of working with fb react (http://facebook.github.io/react/index.html) as easy as possible.\nAnd also to integrate it into Sails workflow.\n\nWith the default configuration it will parse your generated view for any html tag containing `sails-react`.\nIf so, the given tag (e.g. `\u003cTodoApp sails-react /\u003e`) will be used to match a specific tag within your template folder (here `assets/templates/todoapp.jsx`).\nAlso this html file will be used as top level node for its file match. To do so automatically a line will attached to make this possible.\nThis give you the means for example to use a dynemic data tag within the react html tag without any further programming.\nThis file will be processed through the configured view engine (to make use of the integrated i18n for example).\nThen it will be compiled from jsx to standard javascript.\nThis will be done with Browserify (http://browserify.org/) meaning that you can use require. Ceep it clean.\nAnd at last it will be minified before it will be released.\n\nNote: your files will be not altered through that.\n\nOf cource the result can be (will be in default) cached to contain the overhead of this whole procedure.\nBut if you are developing on the jsx file disable cache. It saves time not to be forced to restart sails.\nIf an error occures cache will be automatically disabled.\n\n## Current State\nVersion: `0.0.2`\n\nThis package is on its first steps. The near future will tell how it proves itself and what will be changed.\nPlease feel free to make any helpfull suggestions.\n\n## Getting Started\nThis plugin requires:\n\n```\n\"grunt\": \"0.4.2\",\n\"grunt-react\": \"~0.7.0\",\n\"grunt-browserify \": \"~2.0.1\",\n\"uglify-js\": \"~2.4.13\"\n```\n\nYou may install this plugin with this command:\n\n```shell\nnpm install sails-react --save-dev\n```\n\nOr register the plugin within the root package.json file in your sails project. `\"sails-react\": \"~0.0.2\"`\nAfter this update the npm packages with:\n\n```shell\nnpm install\n```\n\n## Usage\nTo use sails-react you have to insert the following code into `config/express.js` (As usual within your project folder):\n\n```js\ncustomMiddleware: function (app) {\n  app.use(require('../node_modules/sails-react').middleware(app));\n},\n```\n\nThat should be enough to get started. There are several configurations posible.\nThe default configuration is:\n\n```js\nmodule.exports = {\n  /**\n  * Relative path to react templates.\n  *\n  * @property templates\n  * @type {String}\n  * @default \"/assets/templates\"\n  */\n  templates: \"/assets/templates\",\n  \n  temporary: {\n    /**\n    * Using temp folder.\n    *\n    * true    : to use same folder as templates folder above (necessary for require() - browserify).\n    * false   : for using system temp folder.\n    * String  : for specific folder.\n    *\n    * @property temporary.folder\n    * @type {String|Boolean}\n    * @default true\n    */\n    folder: true,\n    /**\n    * Prefix for temp files.\n    *\n    * @property temporary.prefix\n    * @type {String}\n    * @default \"sails-react_\"\n    */\n    prefix: \"sails-react_\",\n    /**\n    * Ceep it clean. Remove temp files after usage.\n    *\n    * @property temporary.prefix\n    * @type {String}\n    * @default \"sails-react_\"\n    */\n    cleanup: true\n  },\n  \n  render: {\n    /**\n    * If sails-react finds an react html tag, it will use the file pattern to look after a match\n    * within the templates (above) folder.\n    * You also could use this for subdirs, like \"$\u003cpath\u003e/$\u003clang\u003e.jsx\".\n    *\n    * $\u003cpath\u003e  : will be replaced with the given html tag or the specfic value (\u003c... sails-react=\"$\u003cpath\u003e\" /\u003e)\n    * $\u003clang\u003e  : client language (e.g. en|de|fr|ru|sp...)\n    *\n    * @property render.filePattern\n    * @type {String}\n    * @default \"$\u003cpath\u003e.jsx\"\n    */\n    filePattern: \"$\u003cpath\u003e.jsx\",\n    /**\n    * File pattern (above) will be forced to lower case.\n    *\n    * @property render.lowerCaseFilenames\n    * @type {Boolean}\n    * @default true\n    */\n    lowerCaseFilenames: true,\n    /**\n    * How to handle the given html tag.\n    *\n    * false   : nothing will be done.\n    * true    : it will keep the tag name but it will be use automatically as top level element.\n    * String  : the html tag will be replace by the given string. (\u003cTodoApp seils-react /\u003e becomes \u003cdiv id=\"...\" /\u003e)\n    *\n    * @property render.autoUseTag\n    * @type {String|Boolean}\n    * @default \"div\"\n    */\n    autoUseTag: \"div\",\n    /**\n    * If render.autoUseTag is true this querySelector will be used to match the replaced html tag for react.\n    * You could use for example jQuery.\n    *\n    * @property render.querySelector\n    * @type {String}\n    * @default \"document.querySelector\"\n    */\n    querySelector: \"document.querySelector\",\n    /**\n    * First process step. The matched file will be parsed by the configured view engine. (like sails JST)\n    *\n    * @property render.processView\n    * @type {Boolean}\n    * @default true\n    */\n    processView: true,\n    /**\n    * Second process step. The matched file will be compiled from jsx to standard javascript.\n    *\n    * @property render.processJsx\n    * @type {Boolean}\n    * @default true\n    */\n    processJsx: true\n  },\n  \n  linker: {\n    /**\n    * Third process step. The matched file will be minified.\n    * uglify-v2 will be used for that.\n    *\n    * @property linker.minify\n    * @type {Boolean}\n    * @default true\n    */\n    minify: true,\n    /**\n    * The given string will be used as an anker to insert automatically the processed file.\n    * If false nothing will be insert.\n    *\n    * @property linker.lookfor\n    * @type {String|Boolean}\n    * @default \"\u003c/body\u003e\"\n    */\n    lookfor: \"\u003c/body\u003e\",\n    /**\n    * Where exactly to insert the processed file.\n    *\n    * true    : insert it after linker.lookfor\n    * false   : insert it before linker.lookfor\n    * null    : replace linker.lookfor\n    *\n    * @property linker.after\n    * @type {Object|Boolean}\n    * @default \"\u003c/body\u003e\"\n    */\n    after: false,\n    /**\n    * This works only if cache is enabled.\n    * Whether to insert the source code or link only the cached file.\n    *\n    * true    : link cached file.\n    * false   : insert the source code of the processed file directly.\n    *\n    * @property linker.linkCacheFile\n    * @type {Boolean}\n    * @default true\n    */\n    linkCacheFile: false,\n    /**\n    * The type of the script tag.\n    * If you use jsx at the client side you would use \"text/jsx\".\n    *\n    * @property linker.scriptType\n    * @type {String}\n    * @default \"text/javascript\"\n    */\n    scriptType: \"text/javascript\",\n  },\n\n  // Use cache if you have static content in the end, to avoid unnecessary overhead.\n  cache: {\n    /**\n    * Whether to enable or disable cache.\n    *\n    * @property cache.enabled\n    * @type {Boolean}\n    * @default true\n    */\n    enabled: true,\n    /**\n    * How to save the generated cache files.\n    * This files will be saved into the public folder of sails. (e.g. /.tmp/public/)\n    * Normally the folder will be cleard after every lift.\n    * You have following placeholder to your disposal:\n    *\n    * $\u003curl\u003e   : the called url. Any special char within the url will be replaced with '_'.\n    * $\u003clang\u003e  : the used language.\n    *\n    * @property cache.dest\n    * @type {String}\n    * @default \"$\u003curl\u003e-$\u003clang\u003e.js\"\n    */\n    dest: \"$\u003curl\u003e-$\u003clang\u003e.js\"\n  }\n};\n```\n\nYou can overwrite these of cource if you modify the file `node_modules/sails-react/lib/options.js`.\nOr better you create a new config file `config/sailsReact.js`.\n\n## Donation\nPlease help me to finance my every cup of tea. Every coin is appreciated.\n\n```\nSick of tea? That’s like being sick of *breathing*! - Uncle Iroh\n```\n\nBitcoin address: `197EypPopXtDPFK6rEbCw6XDEaxjTKP58S`\n\nPayPal: `jan.guth@gmail.com`\n\nOr just `flattr` this repo.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffentas%2Fsails-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffentas%2Fsails-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffentas%2Fsails-react/lists"}