New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
express-tsx
Advanced tools
express-tsx - npm Package Compare versions
Comparing version 4.2.1 to 4.2.2
| # Change Log | ||
| ## [next] | ||
| - 动态更新和 redux 结合达到动态更新界面 | ||
| ## [4.2.x@beta] | ||
| - 不再强制使用 `?callback=define` 获取初始化数据 , 转而提供一个 `?props` 路径以供获取数据 | ||
| - 动态更新模块达成 . 需要通过 app.locals.hotreload = true 来开启 | ||
| - 以上均在 `[example/index.js](./example/index.js)` 中有更新 | ||
| ## [4.1.0] | ||
@@ -4,0 +12,0 @@ ### 增加了下列 api |
@@ -36,5 +36,6 @@ "use strict"; | ||
| let listener = (file) => { | ||
| let imports = exports.compiler.getImportsWithoutTypes(file).map(exports.compiler.tourl(res.locals.express_tsx_basePath)); //compile new import file | ||
| res.write([ | ||
| 'event: hotreload', | ||
| `data: ${exports.compiler.tourl(res.locals.express_tsx_basePath)(file)}`, | ||
| `data: ${JSON.stringify(imports)}`, | ||
| '\n', | ||
@@ -41,0 +42,0 @@ ].join('\n')); |
@@ -0,0 +0,0 @@ "use strict"; |
| { | ||
| "name": "express-tsx", | ||
| "version": "4.2.1", | ||
| "version": "4.2.2", | ||
| "description": "express view engine", | ||
@@ -36,2 +36,4 @@ "main": "dist/index.js", | ||
| "react": "^15.6.1", | ||
| "react-redux": "^5.0.5", | ||
| "redux": "^3.7.2", | ||
| "request": "^2.81.0", | ||
@@ -38,0 +40,0 @@ "request-promise": "^4.2.1", |
@@ -16,2 +16,4 @@ | ||
| const server = expressTsx(__dirname) | ||
| //开启 express-tsx 热更新 , 默认关闭 | ||
| server.locals.hotreload = true | ||
| //服务监听 | ||
@@ -21,12 +23,22 @@ server.listen(9000,function(){ console.log(`server is running on ${this.address().port}`) }) | ||
| server.use(expressTsxMiddleware) | ||
| require('./requirejs.config') | ||
| //渲染视图 | ||
| server.use('/',(req,res)=>res.render('./view.tsx')) | ||
| server.use(/\/$/,(req,res)=>{ | ||
| if(!req.query.callback){ return res.render('./hello.tsx') } | ||
| res.jsonp({word:'world'}) | ||
| }) | ||
| //还在测试 redux 中 ; 但状态管理工具并不限制于 redux | ||
| server.get('/redux',(req,res)=>{ | ||
| res.render('./views/index.tsx') | ||
| }) | ||
| ``` | ||
| [视图文件](./example/view.tsx) | ||
| [视图文件](./example/hello.tsx) | ||
| ```jsx typescript | ||
| import React = require('react') | ||
| console.log('express-tsx' as any) | ||
| export default ()=> | ||
| export type Props = { word:string } | ||
| export const props = require('?props');import '?props'; | ||
| export const View:React.StatelessComponent<Props> = (props)=> | ||
| <div> | ||
| hello world | ||
| hello {props.word} | ||
| </div> | ||
@@ -55,19 +67,3 @@ ``` | ||
| # 深入使用 | ||
| ## 示例1 | ||
| #### 替换 `res.locals.express_tsx_html` 函数来输入你自己的 `html` 结构来应对 `seo` 等情况 | ||
| * 替换`res.locals.express_tsx_html`函数, 相关代码片段: | ||
| [源文件](./test/render.js) | ||
| ```typescript | ||
| const render2 = expressTsx(__dirname) | ||
| render2.use((req,res,next)=>{ | ||
| let originTsxHTML = res.locals.express_tsx_html | ||
| res.locals.express_tsx_html = async(...r)=>{ | ||
| return (await originTsxHTML(...r)).replace(`<body>`,`<body>render by diy html function`) | ||
| } | ||
| next() | ||
| }) | ||
| render2.use('/',(req,res)=>res.render(renderFile)) | ||
| ``` | ||
| *********** |
@@ -32,5 +32,6 @@ import { Router,Response } from "express"; | ||
| let listener = (file:string)=>{ | ||
| let imports = compiler.getImportsWithoutTypes(file).map(compiler.tourl(res.locals.express_tsx_basePath)) //compile new import file | ||
| res.write([ | ||
| 'event: hotreload', | ||
| `data: ${compiler.tourl(res.locals.express_tsx_basePath)(file)}`, | ||
| `data: ${JSON.stringify(imports)}`, | ||
| '\n',//separator | ||
@@ -37,0 +38,0 @@ ].join('\n')) |
@@ -0,0 +0,0 @@ import { compiler } from "./middleware"; |
@@ -5,3 +5,7 @@ declare var requirejs:any | ||
| declare var EventSource:any | ||
| new class App { | ||
| define('?props',[location.href.split('#')[0]+(location.href.indexOf('?')===-1?'?':'')+'&callback=define'],(data)=>data) | ||
| define('?state',()=>({})) | ||
| // 这样你可以在 requirejs.config({ deps:[] }) 中配置环境依赖 | ||
| requirejs.config({ callback(){ new App() } }) | ||
| class App { | ||
| static regx = { | ||
@@ -20,14 +24,9 @@ nativeCode:/\[navtive code\]/, | ||
| static exportModule = exports=>exports | ||
| static updateModule = (module)=>{ | ||
| updateModule = (module)=>{ | ||
| let name = App.getModulename(module) | ||
| let short_name = name.replace(App.regx.index,'') | ||
| let hasUpdate = 0 | ||
| let defined = App.require.defined | ||
| for(let key in defined){ | ||
| if(key.indexOf(short_name) === -1 ){ continue } | ||
| delete defined[key] | ||
| hasUpdate++ | ||
| } | ||
| App.defineModule(module) | ||
| return !!hasUpdate | ||
| let modules = [ name, module, short_name, ] | ||
| if(name === this.main){ this.entry = module } | ||
| modules.forEach(m=>requirejs.undef(m)) | ||
| return App.defineModule(module) | ||
| } | ||
@@ -43,5 +42,7 @@ static defineModule = (module:string)=>{ | ||
| } | ||
| main:string | ||
| entry:string | ||
| constructor(){ | ||
| define('?props',[location.href+(location.href.indexOf('?')===-1?'?':'')+'&callback=define'],(data)=>data) | ||
| if('assign' in Object && !App.regx.nativeCode.test(Object.assign.toString())){ define('es6-shim',null) } | ||
| this.entry = this.imports[0] | ||
| this.main = this.imports.map(App.defineModule)[0] | ||
@@ -51,20 +52,32 @@ requirejs([ ...this.deps, this.main, ],this.render) | ||
| } | ||
| main:string | ||
| deps = ['react','react-dom'] | ||
| static catch = (func)=>{ | ||
| try{ | ||
| func() | ||
| }catch(err){ | ||
| console.error(err) | ||
| } | ||
| } | ||
| static mount = document.getElementById('app') | ||
| render = (cb?:()=>void)=>requirejs(['require',this.main],function render(require,exports,){ | ||
| const React = require('react') | ||
| const ReactDOM = require('react-dom') | ||
| var View = exports.View || exports.default || exports | ||
| var store = exports.props | ||
| ReactDOM.render( | ||
| React.isValidElement(View) ? View | ||
| : React.createElement( | ||
| View, | ||
| store, | ||
| ), | ||
| App.mount | ||
| ) | ||
| typeof cb === 'function' && cb() | ||
| }) | ||
| render = (cb?:()=>void)=>App.catch(requirejs( | ||
| [this.main], | ||
| (exports,)=>{ | ||
| const React = requirejs('react') | ||
| const ReactDOM = requirejs('react-dom') | ||
| var View = exports.View || exports.default || exports | ||
| var props = exports.props | ||
| ReactDOM.render( | ||
| React.isValidElement(View) ? View | ||
| : React.createElement( | ||
| View, | ||
| props, | ||
| ), | ||
| App.mount | ||
| ) | ||
| typeof cb === 'function' && cb() | ||
| }, | ||
| (e)=>{ | ||
| e.requireModules.forEach(m=>requirejs.undef(m)) | ||
| } | ||
| )) | ||
| watcher:any | ||
@@ -75,7 +88,7 @@ hotreload = ()=>{ | ||
| } | ||
| update = ({ data:module })=>{ | ||
| let hasUpdate = App.updateModule(module) | ||
| if( !hasUpdate ){ return } | ||
| update = ({ data })=>App.catch(()=>{ | ||
| let module:string[] = JSON.parse(data) | ||
| this.updateModule(this.entry) | ||
| module.forEach(this.updateModule) | ||
| if(App.dev){ | ||
| console.log(`has update module : ${module}`) | ||
| this.render(()=>{ | ||
@@ -85,5 +98,5 @@ console.log(`view has rerender!`) | ||
| }else{ | ||
| this.render() | ||
| } | ||
| } | ||
| }) | ||
| } |
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
- increased by2.07%
52699
- Lines of code
- increased by2.11%
774
Worsened metrics
- Dev dependency count
- increased by13.33%
17
- Number of lines in readme file
- decreased by-5.71%
66
No dependency changes