basic rendering

index.cirru

@@ -2,7 +2,7 @@ doctype
 
 html
   head
-    title "Webpack Workflow"
+    title "Cirru Editor"
     meta (:charset utf-8)
     script (:defer)
       :src (@ main)

package.json

@@ -15,10 +15,12 @@
     "cirru-script-loader": "0.0.3",
     "coffee-loader": "^0.7.2",
     "coffee-script": "^1.9.0",
+    "css-loader": "^0.9.1",
     "gulp": "^3.8.11",
     "gulp-cirru-html": "0.0.4",
     "react": "^0.12.2",
     "react-hot-loader": "^1.1.5",
+    "style-loader": "^0.8.3",
     "webpack": "^1.5.3",
     "webpack-dev-server": "^1.7.0"
   },

src/components/editor.cirru

@@ -10,8 +10,10 @@
   :displayName :cirru-editor
 
   :getInitialState $ \ () $ object
+    :ast $ astStore.get
 
   :render $ \ ()
     o :div
       object (:className :cirru-editor)
-      , :cirru-editor
+      Expr
+        object (:expr @state.ast) (:coord $ array)

src/components/expr.cirru

@@ -1,5 +1,6 @@
 
 = React $ require :react/addons
+= _ $ require :lodash
 
 = Token $ React.createFactory $ require :./token
 
@@ -10,9 +11,15 @@
   :displayName :cirru-expr
 
   :propTypes $ object
-    :ast T.array.isRequired
+    :expr T.array.isRequired
+    :coord T.array.isRequired
 
   :render $ \ ()
     o :div
       object (:className :cirru-expr)
-      , :cirru-expr
+      _.map @props.expr $ \= (item index)
+        if (_.isString item)
+          do $ Token $ object (:token item) (:key index) (:coord $ @props.coord.concat index)
+          do $ Expr $ object (:expr item) (:key index) (:coord $ @props.coord.concat index)
+
+= Expr $ React.createFactory module.exports

src/components/token.cirru

@@ -1,14 +1,32 @@
 
 = React $ require :react/addons
 
+= astAction $ require :../actions/ast
+= detect $ require :../util/detect
+
 = Suggest $ React.createFactory $ require :./suggest
 
 = o React.createElement
+= T React.PropTypes
 
 = module.exports $ React.createClass $ object
   :displayName :cirru-token
 
+  :propTypes $ object
+    :token T.string.isRequired
+    :coord T.array.isRequired
+
+  :getInitialState $ \ () $ object
+    :token @props.token
+
+  :onChange $ \ (event)
+    console.log :token-update event.target.value @props.coord
+
   :render $ \ ()
-    o :div
-      object
-      , :cirru-token
+    = width $ detect.textWidth @state.token :14px :Menlo
+    = style $ object
+      :width $ ++: width :px
+
+    o :input
+      object (:className :cirru-token) (:value @state.token) (:style style)
+        :onChange @onChange

src/main.cirru

@@ -1,6 +1,8 @@
 
 = React $ require :react/addons
 
+require :./style/main.css
+
 = Editor $ React.createFactory $ require :./components/editor
 
 = editor $ Editor

src/store/ast.cirru

@@ -2,6 +2,10 @@
 = EventEmitter  $ require :wolfy87-eventemitter
 = dispatcher    $ require :../dispatcher
 
+= store $ JSON.parse $ or
+  localStorage.getItem :cirru-ast
+  , :[]
+
 = store $ array
   array :this :is :a :demo
   array :this :is :another
@@ -19,9 +23,9 @@
 
 _.assign astStore $ object
   :onchange $ \ ()
+    localStorage.setItem :cirru-ast $ JSON.stringify store
     @emit :change
 
-  :get $ \ ()
-    store
+  :get $ \ () store
 
-= module.export astStore
+= module.exports astStore

src/style/layout.css

@@ -0,0 +1,21 @@
+
+.cirru-editor {
+  background-color: hsl(240,80%,80%);
+}
+
+.cirru-expr {
+  border: 1px solid white;
+  padding: 6px 10px;
+}
+
+.cirru-token {
+  border: 1px solid white;
+  background-color: transparent;
+  outline: none;
+  color: white;
+  font-family: Menlo;
+  line-height: 24px;
+  font-size: 14px;
+  padding: 0 4px;
+  box-sizing: content-box;
+}

src/style/main.css

@@ -0,0 +1,6 @@
+
+@import url(./layout.css);
+
+body {
+  margin: 0;
+}

src/util/detect.cirru

@@ -0,0 +1,12 @@
+
+= canvas $ document.createElement :canvas
+
+= ctx $ canvas.getContext :2d
+
+= exports.textWidth $ \ (text size family)
+  ctx.save
+  console.log (++: size ": " family)
+  = ctx.font $ ++: size ": " family
+  = width $ . (ctx.measureText text) :width
+  ctx.restore
+  , width

webpack.config.js

@@ -16,19 +16,20 @@ module.exports = {
     publicPath: 'http://localhost:8080/build/'
   },
   resolve: {
-    extensions: ['', '.js', '.cirru']
+    extensions: ['', '.js', '.cirru', '.css']
   },
   module: {
     loaders: [
       {test: /\.coffee$/, loaders: ['react-hot', 'coffee'], exclude: /node_modules/},
-      {test: /\.cirru$/, loaders: ['react-hot', 'cirru-script'], exclude: /node_modules/}
+      {test: /\.cirru$/, loaders: ['react-hot', 'cirru-script'], exclude: /node_modules/},
+      {test: /\.css$/, loaders: ['style', 'css']}
     ]
   },
   plugins: [
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoErrorsPlugin(),
     function() {
-       this.plugin('done', function(stats) {
+      this.plugin('done', function(stats) {
         content = JSON.stringify(stats.toJson().assetsByChunkName, null, 2)
         return fs.writeFileSync('assets.json', content)
       })