Add a simple demo app and adjust the README file

ionut-botizan · May 4, 2016 · 8f07a49 · 8f07a49
1 parent eae8c22
commit 8f07a49
Show file tree

Hide file tree

Showing 13 changed files with 166 additions and 11 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
-node_modules
+node_modules
+dist
diff --git a/.npmignore b/.npmignore
@@ -1 +1,2 @@
-node_modules
+node_modules
+demo
diff --git a/README.md b/README.md
@@ -15,12 +15,14 @@ npm i -D external-jsx-loader
 ---
 
 ## Usage
-1. Create your component's class same as before
-2. Move the JSX tags from the `render()` method to a new file (Eg. `new-file.tpl.jsx`)
-3. Require the new file (Eg. `const view = require('./new-file.tpl.jsx');`)
+1. Create your component same as before (Eg. `my-component.js`)
+2. Move the code (including the JSX tags) from the `render()` method to a new file (Eg. `my-component.jsx`)
+3. In your component's definition file, require the JSX file (Eg. `const view = require('./my-component.jsx');`)
 4. In the `render()` method, `return view(this);`
 5. Configure webpack to use the `external-jsx` loader for the template files, based on the file extension you chose for your templates
 
+*(See the sample "Hello World!" app in the `demo` folder)*
+
 ---
 
 ## Webpack config
@@ -29,11 +31,11 @@ The easiest way is to configure it as a pre-loader:
 {
 	module: {
 		preLoaders: [
-			{test: /\.tpl\.jsx$/, loader: 'external-jsx', exclude: /node_modules/}
+			{test: /\.jsx$/, loader: 'external-jsx' /*...*/}
 		],
 
 		loaders: [
-			{test: /\.jsx$/, loader: 'babel', exclude: /node_modules/}
+			{test: /\.jsx?$/, loader: 'babel' /*...*/}
 		]
 	}
 }
@@ -43,7 +45,8 @@ But you can configure it as a loader too:
 {
 	module: {
 		loaders: [
-			{test: /\.tpl\.jsx$/, loader: 'babel!external-js', exclude: /node_modules/}
+			{test: /\.jsx$/, loader: 'babel!external-jsx' /*...*/},
+			{test: /\.js$/,  loader: 'babel' /*...*/}
 		]
 	}
 }
@@ -53,10 +56,10 @@ Either way, you have to make sure the loader is executed **before** the `babel`
 ---
 
 ## Example
-**File:** *MyComponent.jsx*
+**File:** *my-component.js*
 ```js
 const React = require('react');
-const view  = require('./MyComponent.tpl.jsx'); // require the template
+const view  = require('./my-component.jsx'); // require the template
 
 class MyComponent extends React.Component {
 	constructor(props) {
@@ -83,7 +86,7 @@ class MyComponent extends React.Component {
 module.exports = MyComponent;
 ```
 
-**File:** *MyComponent.tpl.jsx*
+**File:** *my-component.jsx*
 ```jsx
 <div>
 	<h1>Hello!</h1>

diff --git a/demo/.babelrc b/demo/.babelrc
@@ -0,0 +1,3 @@
+{
+	"presets": ["react", "es2015"]
+}
diff --git a/demo/README.md b/demo/README.md
@@ -0,0 +1,12 @@
+# external-jsx-loader demo
+
+This is some sample code demonstrating a possible scenario using the external-jsx loader.
+
+---
+
+## Building & running
+
+1. `cd` to the `demo` directory
+2. Run `npm install`
+3. Run `webpack`
+4. Open `index.html` in your browser
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>external-jsx-loader demo</title>
+</head>
+
+<body>
+	<div id="app-entry"></div>
+	<script src="dist/app.js"></script>
+</body>
+</html>
diff --git a/demo/package.json b/demo/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "jsx",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "babel-core": "^6.8.0",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "external-jsx-loader": "^1.0.0",
+    "webpack": "^1.13.0"
+  },
+  "dependencies": {
+    "react": "^15.0.2",
+    "react-dom": "^15.0.2"
+  }
+}
diff --git a/demo/src/app.js b/demo/src/app.js
@@ -0,0 +1,9 @@
+const React      = require('react');
+const ReactDOM   = require('react-dom');
+
+const HelloWorld = require('./components/hello-world.js');
+
+const AppStart   = React.createFactory(HelloWorld);
+const AppEntry   = document.querySelector('#app-entry');
+
+ReactDOM.render(AppStart(), AppEntry);
diff --git a/demo/src/components/hello-world.js b/demo/src/components/hello-world.js
@@ -0,0 +1,26 @@
+const React = require('react');
+const view  = require('./hello-world.jsx'); // require the template
+
+class HelloWorld extends React.Component {
+	constructor(props) {
+		super(props);
+
+		this.state  = {who: 'World'};
+		this.greet  = this.greet.bind(this);
+		this.update = this.update.bind(this);
+	}
+
+	greet(evt) {
+		alert(`Hello ${this.state.who}`);
+	}
+
+	update(evt) {
+		this.setState({who: evt.target.value});
+	}
+
+	render() {
+		return view(this); // render the template passing `this` as the context
+	}
+}
+
+module.exports = HelloWorld;
diff --git a/demo/src/components/hello-world.jsx b/demo/src/components/hello-world.jsx
@@ -0,0 +1,8 @@
+const PageTitle = require('./page-title.js');
+
+<div>
+	<PageTitle name={this.state.who} />
+
+	<input value={this.state.who} onChange={this.update} type="text" />
+	<button onClick={this.greet}>Say hi!</button>
+</div>
diff --git a/demo/src/components/page-title.js b/demo/src/components/page-title.js
@@ -0,0 +1,16 @@
+const React = require('react');
+const view  = require('./page-title.jsx'); // require the template
+
+class PageTitle extends React.Component {
+	constructor(props) {
+		super(props);
+	}
+
+	// some other stuff...
+
+	render() {
+		return view(this); // render the template passing `this` as the context
+	}
+}
+
+module.exports = PageTitle;
diff --git a/demo/src/components/page-title.jsx b/demo/src/components/page-title.jsx
@@ -0,0 +1,12 @@
+let theTitle = 'Hello';
+
+if (this.props.name !== '') {
+	theTitle += ' ' + this.props.name;
+}
+
+theTitle += '!';
+
+<div>
+	<h1>{theTitle}</h1>
+	<hr />
+</div>
diff --git a/demo/webpack.config.js b/demo/webpack.config.js
@@ -0,0 +1,30 @@
+const separator = __dirname.match(/\//) ? '/' : '\\';
+const appRoot   = __dirname + separator;
+
+module.exports = {
+	context: __dirname,
+	entry: {
+		app: './src/app.js',
+	},
+	output: {
+		path: appRoot + 'dist',
+		filename: '[name].js'
+	},
+	resolve: {
+		extension: ['', '.js']
+	},
+	stats: {
+		colors: true,
+		reasons: true,
+		chunks: false
+	},
+	plugins: [],
+	module: {
+		preLoaders: [
+			{test: /\.jsx$/, loader: 'external-jsx', include: appRoot + 'src'}
+		],
+		loaders: [
+			{test: /\.jsx?$/, loader: 'babel', include: appRoot + 'src'}
+		]
+	}
+}