Add Elm 0.19.1 compatibility

cultureamp · Apr 17, 2020 · 8b87cd8 · 8b87cd8
1 parent 7fb4a59
commit 8b87cd8
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -144,18 +144,18 @@ image =
 Normally when you compile this with Elm, the generated JS will look like:
 
 ```js
-var cultureamp$babel_elm_assets_plugin$WebpackAsset$assetUrl = function (path) {
+var $cultureamp$babel_elm_assets_plugin$WebpackAsset$assetUrl = function (path) {
   return path;
 };
-var author$project$Main$imageUrl = cultureamp$babel_elm_assets_plugin$WebpackAsset$assetUrl(
+var author$project$Main$imageUrl = $cultureamp$babel_elm_assets_plugin$WebpackAsset$assetUrl(
   "./lost.png"
 );
 ```
 
 Now our Babel plugin can transform that JS to use a require call:
 
 ```js
-var cultureamp$babel_elm_assets_plugin$WebpackAsset$assetUrl = function (path) {
+var $cultureamp$babel_elm_assets_plugin$WebpackAsset$assetUrl = function (path) {
   return path;
 };
 var author$project$Main$imageUrl = require("./lost.png");
@@ -164,7 +164,7 @@ var author$project$Main$imageUrl = require("./lost.png");
 Which webpack will know how to handle, meaning your final JS will do something similar to:
 
 ```js
-var cultureamp$babel_elm_assets_plugin$WebpackAsset$assetUrl = function (path) {
+var $cultureamp$babel_elm_assets_plugin$WebpackAsset$assetUrl = function (path) {
   return path;
 };
 var author$project$Main$myImageUrl = "/assets/lost-0fabe3.png";

diff --git a/src/index.ts b/src/index.ts
@@ -90,7 +90,17 @@ const isAssetExpression = (
     options.module.replace(/\./g, "$"),
     options.function
   ].join("$");
-  return isIdentifier(expression.callee) && (expression.callee.name == elm18TaggerName || expression.callee.name == elm19TaggerName)
+  const elm191TaggerName = [
+    '',
+    options.package.replace(/-/g, "_").replace(/\//g, "$"),
+    options.module.replace(/\./g, "$"),
+    options.function
+  ].join("$");
+  return isIdentifier(expression.callee) && (
+    expression.callee.name == elm18TaggerName ||
+    expression.callee.name == elm19TaggerName ||
+    expression.callee.name == elm191TaggerName
+  )
 };
 
 export default plugin;

diff --git a/test/__snapshots__/plugin.spec.ts.snap b/test/__snapshots__/plugin.spec.ts.snap
@@ -4498,3 +4498,11 @@ exports[`the plugin transforms a fully compiled optimized build 1`] = `
 `;
 
 exports[`the plugin works with Elm 0.18 generated code 1`] = `"require('ca-assets/images/illustrations/dashboard.svg').__esModule ? require('ca-assets/images/illustrations/dashboard.svg').default : require('ca-assets/images/illustrations/dashboard.svg');"`;
+
+exports[`the plugin works with Elm 0.19.0 generated code 1`] = `
+"var cultureamp$babel_elm_assets_plugin$WebpackAsset$assetUrl = function (path) {
+  return path;
+};
+
+var author$project$AssetLoaderExample$exampleSvgUrl = require('./ca-monogram.svg').__esModule ? require('./ca-monogram.svg').default : require('./ca-monogram.svg');"
+`;
diff --git a/test/fixtures/elm19.0_input.js b/test/fixtures/elm19.0_input.js
@@ -0,0 +1,4 @@
+var cultureamp$babel_elm_assets_plugin$WebpackAsset$assetUrl = function (path) {
+	return path;
+};
+var author$project$AssetLoaderExample$exampleSvgUrl = cultureamp$babel_elm_assets_plugin$WebpackAsset$assetUrl('./ca-monogram.svg');
diff --git a/test/fixtures/input.js b/test/fixtures/input.js
@@ -1,4 +1,4 @@
-var cultureamp$babel_elm_assets_plugin$WebpackAsset$assetUrl = function (path) {
+var $cultureamp$babel_elm_assets_plugin$WebpackAsset$assetUrl = function (path) {
 	return path;
 };
-var author$project$AssetLoaderExample$exampleSvgUrl = cultureamp$babel_elm_assets_plugin$WebpackAsset$assetUrl('./ca-monogram.svg');
+var author$project$AssetLoaderExample$exampleSvgUrl = $cultureamp$babel_elm_assets_plugin$WebpackAsset$assetUrl('./ca-monogram.svg');
diff --git a/test/plugin.spec.ts b/test/plugin.spec.ts
@@ -53,6 +53,12 @@ describe("the plugin", () => {
     expect(transform(input)).toMatchSnapshot()
   });
 
+  it("works with Elm 0.19.0 generated code", () => {
+    const transform = transformWith(plugin)
+    const input = fixture("elm19.0_input.js");
+    expect(transform(input)).toMatchSnapshot()
+  });
+
   it("custom options work with Elm 0.18", () => {
     const transform = transformWith(plugin, {
       package: "user/project",