Jud Loader

A webpack loader for Jud.

Install

npm install jud-loader babel-loader --save

Features

1. Can load .ju file.
2. Can load parted files(.js/.css/.html) via src attribute.
3. Can specify a custom language to chain any loader.
4. Can specify name when require .ju file.
5. Can write es2015 in script.

Upgrade to v0.3

• Use a different way to load parted files. The old way is deprecated.
• If you dependent jud-components under v0.1, please update it to v0.2.
• Just enjoy the new features!
• Use some hack way to require @jud-module/xxxx in .js file. see issue

Usage

How to load a .ju file.

make a webpack config

module.exports = {
  entry: './main.ju?entry',
  output: {
    path: './dist',
    filename: 'main.js'
  },
  module: {
    loaders: [
      {
        test: /\.ju(\?[^?]+)?$/,
        loader: 'jud'
      }
    ]
  }
};

How to write parted files

specify src attribute

<template src="./main.html"></template>
<style src="./main.css"></style>
<script src="./main.js"></script>

add some custom language for loaders

append a jud config in webpack config

  jud: {
    lang: {
      jade: ['jade-html'] // a jade langauge will chain "jade-html-loader"
    }
  }

main.ju

<template lang="jade">
div
  text Hello Jud
</template>

How to require .ju file as component element

1. first, require a path/to/component.ju in script like require('./foo.ju') or write inline element like <element name="foo" src="./foo.ju"></element>.
2. second, use it in template like <foo></foo>.

<element name="foo" src="./foo.ju"></element>

<template>
  <div>
    <foo></foo>
    <bar></bar>
  </div>
</template>

<script>
  require('./bar.ju')
</script>

How to specify the name of a component

1. By default, the name is the basename without extname of component path.
2. Give a name query in require request, like require('./foo.ju?name="fooo"'). Or specify a name attribute in element, like <element name="fooo" src="./foo.ju" ></element>
3. use the name in template like <fooo></fooo>.

<element name="fooo" src="./foo.ju"></element>

<template>
  <div>
    <fooo></fooo>
    <baar></baar>
  </div>
</template>

<script>
  require('./bar.ju?name=baar')
</script>

Test

npm run test

will run mocha testing.

And you can check the specs in test/spec folder.

Specs

• Build with single template tag
• Build with template and style tags
• Build with template/style/script tags
• Build with single element tag
• Build with multiple element tag
• Build from parted files specifed in src attr
• Manually Require component and specifies an alias name
• Automaticely require component under some folder
• Build with config/data tag
• Require jud module
• Build by using custom language
• Require commonjs module
• Require jud module in commonjs module
• Build with sourcemap(no test)
• Build jud examples

Knew Issues

• Bug Source Map Offset. Encoding to this problem, please use devtool:"eval-source-map" instead of devtool:"source-map".
• Bug Can't set debugger breakpoint. I still don't know the reason, but you can debug with debugger keyword.