Initial commit 🎉

.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+  ],
+  "env": {
+     "test": {
+     }
+   }
+}

.editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.{js, jsx}]
+quote_type = single
+
+[package.json]
+indent_size = 2

.eslintrc.json

@@ -0,0 +1,20 @@
+{
+  "parser": "babel-eslint",
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true,
+    "mocha" : true
+  },
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+  "extends": [
+    "eslint:recommended"
+  ]
+}

.gitignore

@@ -0,0 +1,32 @@
+.DS_Store
+.idea
+.vscode
+
+*.key
+*.pem
+*.pyc
+
+pids
+*.pid
+*.seed
+
+logs
+*.log
+dump.rdb
+npm-debug.log*
+
+build/Release
+node_modules
+node_modules-*
+jspm_packages
+
+lib
+lib-cov
+coverage
+.nyc_output
+
+.grunt
+.lock-wscript
+
+.npm
+.node_repl_history

.npmignore

@@ -0,0 +1,5 @@
+.DS_Store
+src
+coverage
+tests
+test

.nycrc

@@ -0,0 +1,8 @@
+{
+  "exclude": [
+    "tests/**/*"
+  ],
+  "require": [
+    "babel-register"
+  ]
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Gerald Yeo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,88 @@
+# babel-plugin-transform-assets-import-to-string
+> Babel plugin that transforms image assets import and requires to urls / cdn
+
+[![Build Status][circle-badge]][circle-link]
+
+## Table of Contents
+
+-   [About](#about)
+-   [Installation](#installation)
+-   [Usage](#usage)
+    -   [via babelrc](#via-babelrc)
+    -   [via Node API](#via-node-api)
+
+## About
+
+This [babel](https://babeljs.io/) plugin allows you to transform asset files into a string uri, allowing you to point your assets to CDN or other hosts, without needing to run your code through module bundlers.
+
+This helps when doing _isomorphic_ / server-rendered applications.
+
+```js
+import image from '../path/assets/icon.svg';
+const image1 = require('../path/assets/icon1.svg');
+
+// to
+
+const image = 'http://your.cdn.address/assets/icon.svg';
+const image1 = 'http://your.cdn.address/assets/icon1.svg';
+
+// Somewhere further down in your code:
+//
+// eg: JSX
+// <img src={image} alt='' />
+//
+// eg: Other cases
+// ajaxAsyncRequest(image)
+```
+
+## Installation
+
+```
+$> npm install babel-plugin-transform-assets-import-to-string --save
+```
+
+## Usage
+
+### via .babelrc
+```json
+{
+  "plugins": [["transform-assets-import-to-string", {
+    "baseDir": "/assets",
+    "baseUri": "http://your.cdn.address"
+  }]]
+}
+```
+
+### via Node API
+
+```js
+require("babel-core").transform("code", {
+  plugins: [["transform-assets-import-to-string", {
+    "baseDir": "/assets",
+    "baseUri": "http://your.cdn.address"
+  }]]
+});
+```
+
+By default, it will transform the following extensions: `.gif, .jpeg, .jpg, .png, .svg` if `extensions` option is not defined. To configure a custom list, just add the `extensions` array as an option.
+
+__Note:__ leading `.` (dot) is required.
+
+```json
+{
+  "plugins": [
+    ["transform-assets-import-to-string", {
+      "extensions": [".jpg", ".png"]
+    }]
+  ]
+}
+```
+
+## License
+
+`babel-plugin-transform-assets-import-to-string` is [MIT licensed](./LICENSE)
+
+[circle-badge]: https://img.shields.io/circleci/project/github/yeojz/babel-plugin-transform-assets-import-to-string/master.svg?style=flat-square
+[circle-link]: https://circleci.com/gh/yeojz/babel-plugin-transform-assets-import-to-string
+
+

circle.yml

@@ -0,0 +1,13 @@
+machine:
+  node:
+    version: "6"
+general:
+  branches:
+    ignore:
+      - gh-pages
+test:
+  pre:
+    - npm run clean
+  override:
+    - npm run test
+    - npm run lint

package.json

@@ -0,0 +1,55 @@
+{
+  "name": "babel-plugin-transform-assets-import-to-string",
+  "version": "0.0.0",
+  "description": "Babel plugin that transforms image assets import and requires to urls / cdn",
+  "main": "lib/index.js",
+  "scripts": {
+    "build": "cross-env NODE_ENV=production babel src --out-dir lib",
+    "clean": "rimraf lib coverage .nyc_output",
+    "coverage": "cross-env NODE_ENV=test nyc report --reporter=lcov",
+    "coveralls": "cross-env NODE_ENV=test nyc report --reporter=text-lcov | coveralls",
+    "lint": "eslint --ext js src test/**/*.spec.*",
+    "test": "cross-env NODE_ENV=test npm run test:run",
+    "test:run": "nyc --reporter=text-summary mocha 'test/**/*.spec.js'",
+    "test:watch": "npm run test -- -- --watch"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yeojz/babel-plugin-transform-assets-import-to-string.git"
+  },
+  "keywords": [
+    "babel",
+    "import",
+    "assets",
+    "cdn",
+    "images",
+    "isomorphic",
+    "server-side-rendering",
+    "babel-plugin",
+    "plugin",
+    "require",
+    "transform",
+    "string",
+    "universal",
+    "webpack"
+  ],
+  "author": "Gerald Yeo <[email protected]>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/yeojz/babel-plugin-transform-assets-import-to-string/issues"
+  },
+  "homepage": "https://github.com/yeojz/babel-plugin-transform-assets-import-to-string#readme",
+  "devDependencies": {
+    "babel-cli": "^6.24.1",
+    "babel-eslint": "^7.2.3",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-register": "^6.24.1",
+    "chai": "^4.0.0",
+    "cross-env": "^5.0.0",
+    "eslint": "^3.19.0",
+    "mocha": "^3.4.2",
+    "nyc": "^10.3.2",
+    "rimraf": "^2.6.1"
+  },
+  "dependencies": {}
+}

src/index.js

@@ -0,0 +1,49 @@
+import {dirname, extname, resolve} from'path';
+import transform from './transform';
+
+export const defaultOptions = {
+  extensions: [
+    '.gif',
+    '.jpeg',
+    '.jpg',
+    '.png',
+    '.svg'
+  ]
+}
+
+const applyTransform = (p, t, state, value, calleeName) => {
+  const ext = extname(value);
+  const options = Object.assign({}, defaultOptions, state.opts);
+
+
+  if (options.extensions && options.extensions.indexOf(ext) >= 0) {
+    const dir = dirname(resolve(state.file.opts.filename));
+    const absPath = resolve(dir, value);
+    transform(p, t, options, absPath, calleeName);
+  }
+}
+
+export function transformImportsInline({types: t}) {
+  return {
+    visitor: {
+      ImportDeclaration(p, state) {
+        applyTransform(p, t, state, p.node.source.value, 'import');
+      },
+      CallExpression(p, state) {
+        const callee = p.get('callee');
+        if (!callee.isIdentifier() || !callee.equals('name', 'require')) {
+          return;
+        }
+
+        const arg = p.get('arguments')[0];
+        if (!arg || !arg.isStringLiteral()) {
+          return;
+        }
+
+        applyTransform(p, t, state, arg.node.value, 'require');
+      }
+    }
+  }
+}
+
+export default transformImportsInline;

src/transform.js

@@ -0,0 +1,65 @@
+import crypto from 'crypto'
+import fs from 'fs';
+import path from 'path';
+
+function getHash(str) {
+  return crypto
+    .createHash('sha1')
+    .update(str, 'utf8')
+    .digest('hex')
+    .slice(0, 8);
+}
+
+function getFile(absPath, baseDir, uri) {
+  const file = absPath
+    .split(baseDir || path.sep)
+    .pop();
+
+  if (!baseDir) {
+    return (uri) ? '/' + file : file;
+  }
+
+  return path.join(baseDir, file)
+    .replace(/\\/g, '/')
+    .replace(/\/\/g/, '/');
+}
+
+const getVariableName = (p) => {
+  if (
+    p.node.specifiers
+    && p.node.specifiers[0]
+    && p.node.specifiers[0].local
+  ) {
+    return p.node.specifiers[0].local.name
+  }
+}
+
+export default (p, t, opts, absPath, calleeName) => {
+  const file = getFile(absPath, opts.baseDir, opts.baseUri);
+  let hash = '';
+
+  if (opts.hash === 1) {
+    const content = fs.readFileSync(absPath, 'utf8').trim();
+    hash = '?' + getHash(content);
+  }
+
+  const uri = `${opts.baseUri || ''}${file}${hash}`;
+
+  if (calleeName === 'require') {
+    p.replaceWith(t.StringLiteral(uri));
+    return;
+  }
+
+  const variableName = getVariableName(p);
+  if (variableName) {
+    p.replaceWith(
+      t.variableDeclaration('const', [
+        t.variableDeclarator(
+          t.identifier(variableName),
+          t.stringLiteral(uri)
+        )
+      ])
+    );
+  }
+
+}

test/fixtures/import-image.js

@@ -0,0 +1 @@
+import test from '../../some/assets/deep/folder/assets/path/to/icon.svg';

test/fixtures/import-no-ext.js

@@ -0,0 +1 @@
+import test from 'something';

test/fixtures/import-uri-hash.js

@@ -0,0 +1 @@
+import test from '../icon.svg'