bobwen-dev/react-templates
1
0
Fork 0
mirror of https://github.com/bobwen-dev/react-templates synced 2025-04-12 00:56:39 +02:00
Code Issues Releases Wiki Activity

Added rt-require example to show amd and commonjs support

Browse Source
This commit is contained in:
amitk 2014-12-30 21:19:49 +02:00
parent 8ef5be16bf
commit d87b86b960
5 changed files with 26 additions and 9 deletions

2
playground/dist/home.min.js vendored

File diff suppressed because one or more lines are too long

10
playground/examples.js

@ -5,8 +5,9 @@ define(['lodash', 'react', './examples.rt',
'text!./samples/rt-if.code', 'text!./samples/rt-if.rt', 'text!./samples/rt-if.code', 'text!./samples/rt-if.rt',
'text!./samples/rt-props.code', 'text!./samples/rt-props.rt', 'text!./samples/rt-props.code', 'text!./samples/rt-props.rt',
'text!./samples/rt-repeat.code', 'text!./samples/rt-repeat.rt', 'text!./samples/rt-repeat.code', 'text!./samples/rt-repeat.rt',
'text!./samples/weather.code', 'text!./samples/weather.rt' 'text!./samples/weather.code', 'text!./samples/weather.rt',
], function (_, React, examplesTemplate, helloCode, helloRT, todoCode, todoRT, rtIfCode, rtIfRT, rtPropsCode, rtPropsRT, rtRepeatCode, rtRepeatRT, weatherCode, weatherRT) { 'text!./samples/rt-require.rt'
], function (_, React, examplesTemplate, helloCode, helloRT, todoCode, todoRT, rtIfCode, rtIfRT, rtPropsCode, rtPropsRT, rtRepeatCode, rtRepeatRT, weatherCode, weatherRT, rtRequireRT) {
var samples = { var samples = {
hello: [helloCode, helloRT], hello: [helloCode, helloRT],
todo: [todoCode, todoRT], todo: [todoCode, todoRT],
@ -26,9 +27,10 @@ define(['lodash', 'react', './examples.rt',
displayName: 'Examples', displayName: 'Examples',
mixins: [React.addons.LinkedStateMixin], mixins: [React.addons.LinkedStateMixin],
getInitialState: function () { getInitialState: function () {
var codeAmd = window.reactTemplates.convertTemplateToReact(helloRT, {modules: 'amd', name: 'template'}); var codeAmd = window.reactTemplates.convertTemplateToReact(rtRequireRT, {modules: 'amd', name: 'template'});
var codeCJS = window.reactTemplates.convertTemplateToReact(helloRT, {modules: 'commonjs', name: 'template'}); var codeCJS = window.reactTemplates.convertTemplateToReact(rtRequireRT, {modules: 'commonjs', name: 'template'});
return { return {
rtRequire: {value: rtRequireRT},
amd: {value: codeAmd}, amd: {value: codeAmd},
cjs: {value: codeCJS}, cjs: {value: codeCJS},
samples: samples samples: samples

11
playground/examples.rt

@ -44,17 +44,24 @@
</p> </p>
<playground id="weatherExample" rt-props="this.state.samples.weather" direction="horizontal"></playground> <playground id="weatherExample" rt-props="this.state.samples.weather" direction="horizontal"></playground>
</div> </div>
<div id="rt-require" class="example">
<h3>rt-require</h3>
<p>
This example shows how to load other react components and libraries into a react-template and use them in the template
</p>
<viewer rt-props="this.state.rtRequire" mode="javascript" />
</div>
<div id="amd" class="example"> <div id="amd" class="example">
<h3>AMD</h3> <h3>AMD</h3>
<p> <p>
This example shows the hello sample output with AMD support. This example shows the rt-require sample output with AMD support
</p> </p>
<viewer rt-props="this.state.amd" mode="javascript" /> <viewer rt-props="this.state.amd" mode="javascript" />
</div> </div>
<div id="commonjs" class="example"> <div id="commonjs" class="example">
<h3>CommonJS</h3> <h3>CommonJS</h3>
<p> <p>
This example shows the hello sample output with CommonJS support. This example shows the rt-require sample output with CommonJS support
</p> </p>
<viewer rt-props="this.state.cjs" mode="javascript" /> <viewer rt-props="this.state.cjs" mode="javascript" />
</div> </div>

7
playground/examples.rt.js

@ -25,11 +25,14 @@ define([
'id': 'weatherExample', 'id': 'weatherExample',
'direction': 'horizontal' 'direction': 'horizontal'
}, this.state.samples.weather))), React.createElement('div', { }, this.state.samples.weather))), React.createElement('div', {
'id': 'rt-require',
'className': 'example'
}, React.createElement('h3', {}, 'rt-require'), React.createElement('p', {}, '\n This example shows how to load other react components and libraries into a react-template and use them in the template\n '), React.createElement(viewer, _.merge({}, { 'mode': 'javascript' }, this.state.rtRequire))), React.createElement('div', {
'id': 'amd', 'id': 'amd',
'className': 'example' 'className': 'example'
}, React.createElement('h3', {}, 'AMD'), React.createElement('p', {}, '\n This example shows the hello sample output with AMD support.\n '), React.createElement(viewer, _.merge({}, { 'mode': 'javascript' }, this.state.amd))), React.createElement('div', { }, React.createElement('h3', {}, 'AMD'), React.createElement('p', {}, '\n This example shows the rt-require sample output with AMD support\n '), React.createElement(viewer, _.merge({}, { 'mode': 'javascript' }, this.state.amd))), React.createElement('div', {
'id': 'commonjs', 'id': 'commonjs',
'className': 'example' 'className': 'example'
}, React.createElement('h3', {}, 'CommonJS'), React.createElement('p', {}, '\n This example shows the hello sample output with CommonJS support.\n '), React.createElement(viewer, _.merge({}, { 'mode': 'javascript' }, this.state.cjs)))); }, React.createElement('h3', {}, 'CommonJS'), React.createElement('p', {}, '\n This example shows the rt-require sample output with CommonJS support\n '), React.createElement(viewer, _.merge({}, { 'mode': 'javascript' }, this.state.cjs))));
}; };
}); });

5
playground/samples/rt-require.rt Normal file

@ -0,0 +1,5 @@
<rt-require dependency="comps/myComp" as="myComp"/>
<rt-require dependency="utils/utils" as="utils"/>
<div>
<myComp customProp="{utils.doSomething()}">myComp is just a regular tag</myComp>
</div>