egoist / aot-loader

Load and pre-evaluate code at compile time

aot-loader

This is similar to babel-plugin-preval except that this is a webpack loader, which means you can write asynchronous code but import the resolved data synchronously.

It's also similar to val-loader but this loader returns resolved data as JSON object directly.

Install

yarn add aot-loader --dev

Usage

Import a file that you intend to pre-evaluate:

📝 entry.js:

import data from './data?aot'

console.log(data)

📝 data.js:

const axios = require('axios')

module.exports = async () => {
  const posts = await axios.get('http://example.com/posts.json')
  return { posts }
}

Then update your webpack config to pre-evaluate .js files with ?aot query at compile time:

📝 webpack.config.js:

module.exports = {
  entry: './entry.js',
  module: {
    rules: [
      {
        test: /\.js$/,
        enforce: 'post',
        resourceQuery: /\?aot$/,
        loader: 'aot-loader'
      },
      // Following is optional, depending on your needs
      {
        test: /\.js$/,
        loader: 'babel-loader'
      }
    ]
  }
}

Without resource query

import data from /* aot */ './data'
// ↓↓↓ transpiled to:
import data from './data?aot'

To achieve this, you can use the aot babel plugin in your .babelrc:

{
  "plugins": [
    "module:aot-loader/babel"
  ]
}

API

Loader options

getData

• Type: (exported, context) => data || Promise<data>

Get data from the exported object of the file that is being evaluated.

Default value:

function (exported, context) {
  return typeof exported === 'function' ? exported(context) : exported
}

context

The context argument in getData.

Default:

{
  loader: LoaderContext
}

Check out the LoaderContext API.

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Author

aot-loader © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).

github.com/egoist · GitHub @egoist · Twitter @_egoistlily

aot-loader's Issues

Add Vue SFC support

<template>
	<div>{{ count }}</div>
</template>

<aot>
// pre-evaluate at build time
module.exports = () => ({
  count: 0
})
</aot>

{
  resourceQuery: /blockType=aot/,
  loader: 'aot-loader/vue'
}