Add glam example project

emotion-js · May 30, 2017 · 2057419 · 2057419
1 parent b336678
commit 2057419
Show file tree

Hide file tree

Showing 7 changed files with 131 additions and 0 deletions.
diff --git a/examples/glam/README.md b/examples/glam/README.md
@@ -0,0 +1,9 @@
+# emotion/glam example project
+
+## Start
+
+`npm install`
+
+`npm start`
+
+Go to `localhost:3000`
diff --git a/examples/glam/package.json b/examples/glam/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "emotion-glam-example-project",
+  "version": "1.0.0",
+  "description": "emotion/glam example project",
+  "scripts": {
+    "start": "webpack-dev-server --content-base build/ --port 3000"
+  },
+  "dependencies": {
+    "glam": "^4.0.3",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4"
+  },
+  "devDependencies": {
+    "babel-core": "^6.23.1",
+    "babel-eslint": "^7.2.3",
+    "babel-loader": "^7.0.0",
+    "babel-preset-es2015": "^6.22.0",
+    "babel-preset-react": "^6.24.1",
+    "css-loader": "^0.28.4",
+    "emotion": "^0.0.6",
+    "html-webpack-plugin": "^2.28.0",
+    "standard": "^10.0.2",
+    "webpack": "^2.2.0",
+    "webpack-dev-server": "^2.4.5"
+  },
+  "author": "Kye Hohenberger",
+  "license": "MIT",
+  "eslintConfig": {
+    "extends": "standard",
+    "parser": "babel-eslint"
+  },
+  "standard": {
+    "parser": "babel-eslint",
+    "ignore": [
+      "/dist/"
+    ]
+  }
+}
diff --git a/examples/glam/src/index.tpl.html b/examples/glam/src/index.tpl.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+</head>
+
+<body>
+  <div id="app">
+
+  </div>
+  <script src="main.js"></script>
+</body>
+
+</html>
diff --git a/examples/glam/src/legacy.css b/examples/glam/src/legacy.css
@@ -0,0 +1,3 @@
+h1 {
+  color: green;
+}
diff --git a/examples/glam/src/main.js b/examples/glam/src/main.js
@@ -0,0 +1,21 @@
+import './legacy.css'
+import './main.js.css'
+import React from 'react'
+import { render } from 'react-dom'
+import css, { fragment } from 'glam'
+
+function Profile ({ name, color }) {
+  return (
+    <h1
+      className="old-legacy-className"
+      css={`
+        color: ${color};
+        font-size: 128px;
+      `}
+    >
+      Hello {name}
+    </h1>
+  )
+}
+
+render(<Profile name="Dave" color="#4263eb" />, document.getElementById('app'))
diff --git a/examples/glam/src/main.js.css b/examples/glam/src/main.js.css
@@ -0,0 +1,3 @@
+/* do not edit this file */
+.css-rumnts { color: var(--css-rumnts-0);
+        font-size: 128px; }
diff --git a/examples/glam/webpack.config.js b/examples/glam/webpack.config.js
@@ -0,0 +1,42 @@
+var path = require('path')
+var webpack = require('webpack')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+
+var loaders = [
+  {
+    test: /\.jsx?$/,
+    exclude: /node_modules/,
+    loader: 'babel-loader',
+    query: {
+      presets: ['babel-preset-es2015', 'react'],
+      plugins: ['glam/babel', 'emotion/glam']
+    }
+  },
+  {
+    test: /\.css?$/,
+    loader: 'glam/loader'
+  }
+]
+
+module.exports = {
+  devtool: 'eval-source-map',
+  entry: path.resolve('src', 'main.js'),
+  output: {
+    path: path.resolve('build'),
+    filename: 'main.js',
+    publicPath: '/'
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx']
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.resolve('src', 'index.tpl.html'),
+      filename: 'index.html',
+      inject: false
+    })
+  ],
+  module: {
+    loaders: loaders
+  }
+}