Translate import declarations into calls to require() in beforeInit.

index.js

@@ -23,33 +23,34 @@ module.exports = function(file, options) {
             try {
                 var component = rcu.parse(source)
 
-                var script
+                var script = ['var component = module']
+
                 if (component.script) {
-                    script = [
-                        'var component = module',
-                        component.script
-                    ]
-                    if (component.template) {
-                        script.push('component.exports.template = '+toSource(component.template))
-                    }
-                    if (component.css) {
-                        script.push('component.exports.css = '+toSource(component.css))
-                    }
-                    this.queue(script.join('\n\n'))
-                } else {
-                    script = []
-                    script.push('exports.template = '+toSource(component.template))
-                    if (component.css) {
-                        script.push('exports.css = '+toSource(component.css))
-                    }
-                    this.queue(script.join('\n\n'))
+                    script.push(component.script)
                 }
-
+                if (component.template) {
+                    script.push('component.exports.template = '+toSource(component.template))
+                }
+                if (component.css) {
+                    script.push('component.exports.css = '+toSource(component.css))
+                }
+                if (component.imports.length > 0) {
+                    script.push('var __beforeInit = component.exports.beforeInit')
+                    script.push('component.exports.beforeInit = function(options) {')
+                    script.push('if (!options.components) options.components = {}')
+                    component.imports.forEach(function(imp) {
+                        var component = "options.components['" + imp.name + "']";
+                        script.push('if (!' + component + ') ' + component + " = Ractive.extend(require('./" + imp.href + "'))")
+                    })
+                    script.push('__beforeInit && __beforeInit(options)')
+                    script.push('}')
+                }
+                this.queue(script.join('\n\n'))
                 this.queue(null)
             } catch (ex) {
                 stream.emit('error', ex)
             }
         }
     )
     return stream
-};
+};

test/import.ract

@@ -0,0 +1,3 @@
+<link rel="ractive" href="test.ract" />
+
+<div class="parent-component"><test></test></div>

test/import.ract-output

@@ -0,0 +1,20 @@
+var component = module
+
+component.exports.template = { v:1,
+  t:[ { t:7,
+      e:"div",
+      a:{ "class":"parent-component" },
+      f:[ { t:7,
+          e:"test" } ] } ] }
+
+var __beforeInit = component.exports.beforeInit
+
+component.exports.beforeInit = function(options) {
+
+if (!options.components) options.components = {}
+
+if (!options.components['test']) options.components['test'] = Ractive.extend(require('./test.ract'))
+
+__beforeInit && __beforeInit(options)
+
+}

test/simple.js

@@ -50,4 +50,12 @@ test('bad.ract', function(done) {
         assert.equal(error.toString(), 'ParseError: Expected closing delimiter \'}}\' after reference at line 1 character 12:\n{{#inverse Unexpected\n           ^----')
         done()
     })
-})
+})
+
+test('import.ract', function(done) {
+    getTransformedOutput(__dirname+"/import.ract", function(error, output) {
+        assert.ifError(error)
+        assert.equal(output, fs.readFileSync('test/import.ract-output', 'utf8'))
+        done()
+    })
+})

test/test.ract-output

@@ -1,4 +1,6 @@
-exports.template = { v:1,
+var component = module
+
+component.exports.template = { v:1,
   t:[ "Hello ",
     { t:2,
       r:"world" },

test/test2.ract-output

@@ -1,4 +1,6 @@
-exports.template = { v:1,
+var component = module
+
+component.exports.template = { v:1,
   t:[ { t:7,
       e:"div",
       a:{ "class":"kickass" },
@@ -7,4 +9,4 @@ exports.template = { v:1,
           r:"styles" },
         " only." ] } ] }
 
-exports.css = "\ndiv.kickass {\n    /* blue is pretty kickass */\n    color: blue;\n}\n"
+component.exports.css = "\ndiv.kickass {\n    /* blue is pretty kickass */\n    color: blue;\n}\n"