WIP: Embed in babel-using Javascript frameworks

Rakefile

@@ -7,6 +7,7 @@ require 'thread_safe'
 require 'tilt'
 
 CONVERTER_FILE = 'lib/asciidoctor-revealjs/converter.rb'
+JS_FILE = 'build/asciidoctor-reveal.js'
 TEMPLATES_DIR = 'templates'
 
 file CONVERTER_FILE => FileList["#{TEMPLATES_DIR}/*"] do
@@ -25,6 +26,24 @@ namespace :build do
   task 'converter:opal' => 'clean' do
     build_converter :opal
   end
+
+  desc "Transcompile to JavaScript and generate #{JS_FILE}"
+  task :js => 'converter:opal' do
+    require 'opal'
+
+    builder = Opal::Builder.new(compiler_options: {
+      dynamic_require_severity: :error,
+    })
+    builder.append_paths 'lib'
+    builder.build 'asciidoctor-revealjs'
+
+    mkdir_p File.dirname(JS_FILE)
+    File.open(JS_FILE, 'w') do |file|
+      template = File.read('src/asciidoctor-revealjs.tmpl.js')
+      file << template.sub('//OPAL-GENERATED-CODE//', builder.to_s)
+    end
+    File.binwrite "#{JS_FILE}.map", builder.source_map
+  end
 end
 
 task :build => 'build:converter'

asciidoctor-revealjs.gemspec

@@ -43,4 +43,5 @@ Gem::Specification.new do |s|
   s.add_development_dependency 'asciidoctor-templates-compiler', '~> 0.3.0'
   s.add_development_dependency 'slim', '~> 3.0.6'
   s.add_development_dependency 'slim-htag', '~> 0.1.0'
+  s.add_development_dependency 'opal', '~> 0.11.1'
 end

package.json

@@ -41,14 +41,14 @@
   },
   "homepage": "https://github.com/asciidoctor/asciidoctor-reveal.js",
   "dependencies": {
-    "asciidoctor.js": "1.5.6-rc.1",
+    "asciidoctor.js": "1.5.6",
     "reveal.js": "3.6.0"
   },
   "devDependencies": {
     "bestikk-fs": "0.1.0",
     "bestikk-log": "0.1.0",
     "expect.js": "0.3.1",
-    "opal-compiler": "1.0.2"
+    "opal-compiler": "1.0.3"
   },
   "readme": "# Reveal.js converter for Asciidoctor\n\n[Asciidoctor reveal.js](https://github.com/asciidoctor/asciidoctor-reveal.js) is a converter for [Asciidoctor](https://github.com/asciidoctor/asciidoctor) and [Asciidoctor.js](https://github.com/asciidoctor/asciidoctor.js) that transforms an AsciiDoc document into an HTML5 presentation designed to be executed by the [reveal.js](http://lab.hakim.se/reveal-js/) presentation framework.\n\nThis is the npm module. For setup instructions and the AsciiDoc syntax to use to write a presentation see the module's documentation at [https://github.com/asciidoctor/asciidoctor-reveal.js](https://github.com/asciidoctor/asciidoctor-reveal.js).\n"
 }

src/asciidoctor-revealjs.tmpl.js

@@ -0,0 +1,87 @@
+(function (Opal) {
+  function initialize (Opal) {
+//OPAL-GENERATED-CODE//
+  }
+
+  var mainModule
+
+  function resolveModule (name) {
+    if (!mainModule) {
+      checkAsciidoctor()
+      initialize(Opal)
+      mainModule = Opal.const_get_qualified(Opal.Asciidoctor, 'revealjs') // FIXME: was Html5s
+    }
+    if (!name) {
+      return mainModule
+    }
+    return Opal.const_get_qualified(mainModule, name)
+  }
+
+  function checkAsciidoctor () {
+    if (typeof Opal.Asciidoctor === 'undefined') {
+      throw new TypeError('Asciidoctor.js is not loaded')
+    }
+  }
+
+  /**
+   * @param {string} backend The backend name.
+   * @param {Object} opts The converter options.
+   * @return A new instance of `Asciidoctor::Revealjs::Converter`
+   */
+  function Converter (backend, opts) {
+    var converter = resolveModule('Converter').$new(backend, Opal.hash(opts || {}))
+
+    converter.convert = function (node, transform, opts) {
+      return this.$convert(node, transform, Opal.hash(opts || {}))
+    }
+    return converter
+  }
+
+  /**
+   * @return {string} Version of this extension.
+   */
+  function getVersion () {
+    return resolveModule().$$const.VERSION.toString()
+  }
+
+  // TODO get rid of the colisttreeprocessor if I can
+  /**
+   * Registers the Revealjs converter and the supporting extension into Asciidoctor.
+   *
+   * @param registry The Asciidoctor extensions registry to register the
+   *   extension into. Defaults to the global Asciidoctor registry.
+   * @throws {TypeError} if the *registry* is invalid or Asciidoctor.js is not loaded.
+   */
+  function register (registry) {
+    if (!registry) {
+      checkAsciidoctor()
+      registry = Opal.Asciidoctor.Extensions
+    }
+    /*
+    var processor = AttachedColistTreeprocessor()
+
+    // global registry
+    if (typeof registry.register === 'function') {
+      registry.register(function () {
+        this.treeProcessor(processor)
+      })
+    // custom registry
+    } else if (typeof registry.block === 'function') {
+      registry.treeProcessor(processor)
+    } else {
+      throw new TypeError('Invalid registry object')
+    }
+    */
+  }
+
+  var facade = {
+    Converter: Converter,
+    getVersion: getVersion,
+    register: register,
+  }
+
+  if (typeof module !== 'undefined' && module.exports) {
+    module.exports = facade
+  }
+  return facade
+})(Opal);

test/js-babel/.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+dist/*.js

test/js-babel/README.adoc

@@ -0,0 +1,29 @@
+= Asciidoctor Reveal.js integration with Babel
+
+== Usage
+
+Install the dependencies:
+
+ $ npm install
+
+Optional: To install a development version of Asciidoctor-reveal.js (1.1.4 for example):
+
+1. Build npm package (see instructions in `HACKING.adoc` to do so)
+2. Install devel npm package with:
++
+ $ npm i --save ../../asciidoctor-reveal.js-1.1.4-dev.tgz
+
+Test the project:
+
+ $ npm test
+
+[IMPORTANT]
+====
+An exception will be thrown at runtime:
+
+```
+Converter: uninitialized constant Asciidoctor::Converter
+```
+
+For more details, see https://github.com/asciidoctor/asciidoctor-reveal.js/issues/205.
+====

test/js-babel/main.js

@@ -0,0 +1,19 @@
+import Asciidoctor from 'asciidoctor.js'
+const asciidoctor = Asciidoctor()
+
+// Babel will move the import statement at the top of the file.
+// As a consequence, the reveal.js converter will be loaded before the initialization of Asciidoctor.js.
+import 'asciidoctor-reveal.js'
+// If we replace the import statement by a require statement then it's working.
+// Another way to fix this issue is to lazily load the reveal.js converter.
+//require('asciidoctor-reveal.js')
+
+const attributes = { revealjsdir: 'node_modules/reveal.js@' }
+const options = {
+  safe: 'safe',
+  backend: 'revealjs',
+  attributes: attributes,
+  header_footer: true
+}
+
+console.log(asciidoctor.convert('Hello *Babel*', options))