@atlassian/webresource-webpack-plugin 4.10.2-64a2ef2

package/src/webpack-modules/ProvidedExternalDependencyModule.js

@@ -0,0 +1,30 @@
+const ExternalModule = require('webpack/lib/ExternalModule');
+
+/**
+ * ProvidedExternalModule ensures that the `chunkCondition` is true to allow proper asyncChunk context handling
+ * ExternalModules can be defined in different ways. Some of them require the external module to be loaded in the entry point.
+ * This is generally not bad as it doesnt cost anything. However the WRM Plugin relies on ExternalModules to specify provided dependencies.
+ * These provided dependencies are then added to the context of the chunk in which they occur. Async chunks should therefore
+ * have their own dependencies to make the entrypoint as small as possible.
+ * ProvidedExternalModule ensures that.
+ */
+module.exports = class ProvidedExternalDependencyModule extends ExternalModule {
+    constructor(request, dependency, target) {
+        super(request, target);
+        this._request = request;
+        this._dependency = dependency;
+        this._target = target;
+    }
+
+    libIdent() {
+        return `${this._dependency}/${this._request[this._target]}`;
+    }
+
+    chunkCondition() {
+        return true;
+    }
+
+    getDependency() {
+        return this._dependency;
+    }
+};

package/src/webpack-modules/WrmDependencyModule.js

@@ -0,0 +1,12 @@
+const EmptyExportsModule = require('./EmptyExportsModule');
+
+module.exports = class extends EmptyExportsModule {
+    constructor(dependency, type, pluginKey) {
+        super(dependency, type);
+        this._dependency = dependency.includes(':') ? dependency : `${pluginKey}:${dependency}`;
+    }
+
+    getDependency() {
+        return this._dependency;
+    }
+};

package/src/webpack-modules/WrmResourceModule.js

@@ -0,0 +1,33 @@
+const EmptyExportsModule = require('./EmptyExportsModule');
+const path = require('path');
+
+module.exports = class extends EmptyExportsModule {
+    constructor(resourceNameAndLocationPair, target, requestContext, rootContext) {
+        super(resourceNameAndLocationPair, target);
+        const resourcePair = resourceNameAndLocationPair.split('!');
+        let resPath = resourcePair[1];
+
+        // enable relative resource-paths. Still requires that this resource is correctly copied to the right location in target.
+        if (resPath.startsWith('./') || resPath.startsWith('../')) {
+            const fullResourcePath = path.join(requestContext, resPath);
+            resPath = path.relative(rootContext, fullResourcePath);
+        }
+
+        this._resource = [resourcePair[0], resPath];
+    }
+
+    /**
+     * @returns {{0:filename,1:filepath}} an array containing the resource's name and location
+     */
+    getResourcePair() {
+        return this._resource;
+    }
+
+    /**
+     * @returns {Resource} the resource
+     */
+    getResource() {
+        const [name, location] = this._resource;
+        return { name, location };
+    }
+};

package/test/.eslintrc

@@ -0,0 +1,11 @@
+{
+  "env": {
+    "mocha": true
+  },
+  "plugins": [
+    "mocha"
+  ],
+  "rules": {
+    "mocha/no-exclusive-tests": "error"
+  }
+}

package/test/unit/ProvidedExternalDependencyModule.test.js

@@ -0,0 +1,63 @@
+const assert = require('chai').assert;
+
+const ProvidedExternalDependencyModule = require('../../src/webpack-modules/ProvidedExternalDependencyModule');
+
+describe('ProvidedExternalDependencyModule', () => {
+    describe('libIdent', () => {
+        it("should specify a 'libIdent' method used by webpack to create a unique id", () => {
+            const pedm = new ProvidedExternalDependencyModule({ amd: 'something' }, 'some-dependency', 'amd');
+            assert.ok(pedm.libIdent(), 'libIdent did not return a valid value');
+        });
+
+        it('should create deterministic ids based on specified params', () => {
+            const firstProvidedModule = new ProvidedExternalDependencyModule(
+                { amd: 'something' },
+                'some-dependency',
+                'amd'
+            );
+            const secondProvidedModule = new ProvidedExternalDependencyModule(
+                { amd: 'something' },
+                'some-dependency',
+                'amd'
+            );
+            assert.strictEqual(
+                firstProvidedModule.libIdent(),
+                secondProvidedModule.libIdent(),
+                'libIdent did not return the expected values'
+            );
+        });
+
+        it('should return a unique value for unique constructor params', () => {
+            const firstProvidedModule = new ProvidedExternalDependencyModule(
+                { amd: 'something' },
+                'some-dependency',
+                'amd'
+            );
+            const secondProvidedModule = new ProvidedExternalDependencyModule(
+                { amd: 'something-else' },
+                'some-dependency',
+                'amd'
+            );
+            const thirdProvidedModule = new ProvidedExternalDependencyModule(
+                { amd: 'something' },
+                'some-other-dependency',
+                'amd'
+            );
+            assert.notStrictEqual(
+                firstProvidedModule.libIdent(),
+                secondProvidedModule.libIdent(),
+                'unexpected matching libIdent values'
+            );
+            assert.notStrictEqual(
+                firstProvidedModule.libIdent(),
+                thirdProvidedModule.libIdent(),
+                'unexpected matching libIdent values'
+            );
+            assert.notStrictEqual(
+                secondProvidedModule.libIdent(),
+                thirdProvidedModule.libIdent(),
+                'unexpected matching libIdent values'
+            );
+        });
+    });
+});

package/test/unit/WebpackHelpers.test.js

@@ -0,0 +1,37 @@
+const assert = require('chai').assert;
+
+const WebpackHelpers = require('../../src/WebpackHelpers');
+const env = Object.assign({}, process.env);
+
+const stubCompiler = mode => ({ options: { mode } });
+
+describe('isRunningInProductionMode', () => {
+    afterEach(() => {
+        process.env = env;
+    });
+
+    it('determines production mode from compiler settings', function() {
+        assert.equal(
+            WebpackHelpers.isRunningInProductionMode(stubCompiler('production')),
+            true,
+            'production environment not detected properly'
+        );
+    });
+
+    it('returns false if mode is different than production', function() {
+        assert.equal(
+            WebpackHelpers.isRunningInProductionMode(stubCompiler('')),
+            false,
+            'it should not detect production environment'
+        );
+    });
+
+    it('fallbacks to node.env when mode set to none', function() {
+        process.env.NODE_ENV = 'production';
+        assert.equal(
+            WebpackHelpers.isRunningInProductionMode(stubCompiler('none')),
+            true,
+            'production environment not detected properly'
+        );
+    });
+});

package/test/unit/renderCondition.test.js

@@ -0,0 +1,240 @@
+const assert = require('chai').assert;
+const PrettyData = require('pretty-data').pd;
+
+const renderCondition = require('../../src/renderCondition');
+
+describe('renderCondition', () => {
+    describe('should correctly render condition', () => {
+        it('simple condition', () => {
+            const conditionString = PrettyData.xml(renderCondition({ class: 'foo.bar' }));
+            assert.equal(conditionString, '<condition class="foo.bar" />');
+        });
+
+        it('invert condition', () => {
+            const conditionString = PrettyData.xml(renderCondition({ class: 'foo.bar', invert: true }));
+            assert.equal(conditionString, '<condition class="foo.bar" invert="true"/>');
+        });
+
+        describe('with params', () => {
+            it('renders param correctly', () => {
+                const conditionString = PrettyData.xml(
+                    renderCondition({ class: 'foo.bar', invert: true, params: [{}] })
+                );
+                assert.equal(
+                    conditionString,
+                    `
+<condition class="foo.bar" invert="true">
+  <param/>
+</condition>                
+`.trim()
+                );
+            });
+
+            it('renders param with value correctly', () => {
+                const conditionString = PrettyData.xml(
+                    renderCondition({ class: 'foo.bar', invert: true, params: [{ value: 'foo' }] })
+                );
+                assert.equal(
+                    conditionString,
+                    `
+<condition class="foo.bar" invert="true">
+  <param>foo</param>
+</condition>
+                    `.trim()
+                );
+            });
+
+            it('renders param with attributes correctly', () => {
+                const conditionString = PrettyData.xml(
+                    renderCondition({
+                        class: 'foo.bar',
+                        invert: true,
+                        params: [{ attributes: { foo: 'bar', faz: 'baz' } }],
+                    })
+                );
+                assert.equal(
+                    conditionString,
+                    `
+<condition class="foo.bar" invert="true">
+  <param foo="bar" faz="baz"/>
+</condition>
+                    `.trim()
+                );
+            });
+
+            it('renders param with attributes and values correctly', () => {
+                const conditionString = PrettyData.xml(
+                    renderCondition({
+                        class: 'foo.bar',
+                        invert: true,
+                        params: [{ attributes: { foo: 'bar', faz: 'baz' }, value: 'more foo' }],
+                    })
+                );
+                assert.equal(
+                    conditionString,
+                    `
+<condition class="foo.bar" invert="true">
+  <param foo="bar" faz="baz">more foo</param>
+</condition>
+                    `.trim()
+                );
+            });
+
+            it('renders multiple params correctly', () => {
+                const conditionString = PrettyData.xml(
+                    renderCondition({
+                        class: 'foo.bar',
+                        invert: true,
+                        params: [
+                            { attributes: { foo: 'bar', faz: 'baz' }, value: 'more foo' },
+                            { attributes: { foo2: 'bar2' }, value: 'more foo2' },
+                        ],
+                    })
+                );
+                assert.equal(
+                    conditionString,
+                    `
+<condition class="foo.bar" invert="true">
+  <param foo="bar" faz="baz">more foo</param>
+  <param foo2="bar2">more foo2</param>
+</condition>
+                    `.trim()
+                );
+            });
+        });
+
+        it('multiple conditions with params', () => {
+            const conditionString = PrettyData.xml(
+                renderCondition([
+                    {
+                        class: 'foo.bar',
+                        invert: true,
+                        params: [
+                            { attributes: { foo: 'bar', faz: 'baz' }, value: 'more foo' },
+                            { attributes: { foo2: 'bar2' }, value: 'more foo2' },
+                        ],
+                    },
+                    {
+                        class: 'foo.bar.baz',
+                        invert: true,
+                        params: [
+                            { attributes: { foo: 'bar', faz: 'baz' }, value: 'more foo' },
+                            { attributes: { foo2: 'bar2' }, value: 'more foo2' },
+                        ],
+                    },
+                ])
+            );
+            assert.equal(
+                conditionString,
+                `
+<condition class="foo.bar" invert="true">
+  <param foo="bar" faz="baz">more foo</param>
+  <param foo2="bar2">more foo2</param>
+</condition>
+<condition class="foo.bar.baz" invert="true">
+  <param foo="bar" faz="baz">more foo</param>
+  <param foo2="bar2">more foo2</param>
+</condition>
+                `.trim()
+            );
+        });
+    });
+
+    describe('should correctly render conditions', () => {
+        it('simple conditions', () => {
+            const conditionString = PrettyData.xml(
+                renderCondition({
+                    type: 'AND',
+                    conditions: [],
+                })
+            );
+            assert.equal(conditionString, '<conditions type="AND"/>');
+        });
+
+        it('renders conditions inside correctly', () => {
+            const conditionString = PrettyData.xml(
+                renderCondition({
+                    type: 'AND',
+                    conditions: [{ class: 'foo.bar', invert: true }],
+                })
+            );
+            assert.equal(
+                conditionString,
+                `
+<conditions type="AND">
+  <condition class="foo.bar" invert="true"/>
+</conditions>
+            `.trim()
+            );
+        });
+
+        it('renders multiple conditions inside correctly', () => {
+            const conditionString = PrettyData.xml(
+                renderCondition({
+                    type: 'AND',
+                    conditions: [
+                        { class: 'foo.bar', invert: true },
+                        { class: 'foo.bar', invert: true },
+                        { class: 'foo.bar', invert: true },
+                    ],
+                })
+            );
+            assert.equal(
+                conditionString,
+                `
+<conditions type="AND">
+  <condition class="foo.bar" invert="true"/>
+  <condition class="foo.bar" invert="true"/>
+  <condition class="foo.bar" invert="true"/>
+</conditions>
+            `.trim()
+            );
+        });
+
+        it('renders complex nested conditions correctly', () => {
+            const conditionString = PrettyData.xml(
+                renderCondition({
+                    type: 'AND',
+                    conditions: [
+                        {
+                            type: 'OR',
+                            conditions: [
+                                {
+                                    class: 'foo.bar.baz',
+                                    invert: true,
+                                    params: [{ attributes: { name: 'permission' }, value: 'admin' }],
+                                },
+                                {
+                                    class: 'foo.bar.baz2',
+                                    params: [{ attributes: { name: 'permission' }, value: 'project' }],
+                                },
+                            ],
+                        },
+                        {
+                            class: 'foo.bar.baz3',
+                            params: [{ attributes: { name: 'permission' }, value: 'admin' }],
+                        },
+                    ],
+                })
+            );
+            assert.equal(
+                conditionString,
+                `
+<conditions type="AND">
+  <conditions type="OR">
+    <condition class="foo.bar.baz" invert="true">
+      <param name="permission">admin</param>
+    </condition>
+    <condition class="foo.bar.baz2" >
+      <param name="permission">project</param>
+    </condition>
+  </conditions>
+  <condition class="foo.bar.baz3" >
+    <param name="permission">admin</param>
+  </condition>
+</conditions>
+            `.trim()
+            );
+        });
+    });
+});

package/test/unit/renderTransformation.test.js

@@ -0,0 +1,69 @@
+const assert = require('chai').assert;
+const PrettyData = require('pretty-data').pd;
+
+const renderTransformation = require('../../src/renderTransformation');
+
+describe('renderTransformer', () => {
+    it('simple transformation', () => {
+        const transformations = { js: ['jsI18n'] };
+        const conditionString = renderTransformation(transformations);
+        assert.equal(
+            PrettyData.xml(conditionString),
+            `
+<transformation extension="js">
+  <transformer key="jsI18n"/>
+</transformation>
+        `.trim()
+        );
+    });
+
+    it('multiple transformers', () => {
+        const transformations = {
+            js: ['jsI18n'],
+            soy: ['soyTransformer', 'jsI18n'],
+            less: ['lessTransformer'],
+        };
+        const conditionString = renderTransformation(transformations);
+        assert.equal(
+            PrettyData.xml(conditionString),
+            `
+<transformation extension="js">
+  <transformer key="jsI18n"/>
+</transformation>
+<transformation extension="soy">
+  <transformer key="soyTransformer"/>
+  <transformer key="jsI18n"/>
+</transformation>
+<transformation extension="less">
+  <transformer key="lessTransformer"/>
+</transformation>
+        `.trim()
+        );
+    });
+
+    it('contextual transformers', () => {
+        const transformations = {
+            js: ['js-one', 'js-two', 'js-three'],
+            soy: ['soy-one', 'soy-two'],
+            less: ['less-one', 'less-two'],
+            png: ['png-one'],
+        };
+        const resources = [{ location: 'a.js' }, { location: 'b.not.really.soy.actually.js' }, { location: 'c.less' }];
+        const conditionString = renderTransformation(transformations, resources);
+
+        assert.equal(
+            PrettyData.xml(conditionString),
+            `
+<transformation extension="js">
+  <transformer key="js-one"/>
+  <transformer key="js-two"/>
+  <transformer key="js-three"/>
+</transformation>
+<transformation extension="less">
+  <transformer key="less-one"/>
+  <transformer key="less-two"/>
+</transformation>
+            `.trim()
+        );
+    });
+});

package/test/unit/webpack-modules/WrmDependencyModule.test.js

@@ -0,0 +1,24 @@
+const assert = require('chai').assert;
+
+const WrmDependencyModule = require('../../../src/webpack-modules/WrmDependencyModule');
+
+describe('WrmDependencyModule', () => {
+    const type = 'static';
+    const resourceKey = 'my.atlassian.plugin';
+
+    it('should accept valid web-resource key', () => {
+        const dependency = `${resourceKey}:my-web-resource`;
+        const module = new WrmDependencyModule(dependency, type, resourceKey);
+        assert.equal(module.getDependency(), dependency);
+    });
+
+    it('should add resource key when ":" is missing', () => {
+        const firstDependency = 'my-web-resource';
+        const firstModule = new WrmDependencyModule(firstDependency, type, resourceKey);
+        assert.equal(firstModule.getDependency(), `${resourceKey}:${firstDependency}`);
+
+        const secondDependency = 'my.web.resource';
+        const secondModule = new WrmDependencyModule(secondDependency, type, resourceKey);
+        assert.equal(secondModule.getDependency(), `${resourceKey}:${secondDependency}`);
+    });
+});

package/test/use-cases/.eslintrc

@@ -0,0 +1,14 @@
+{
+  "env": {
+    "amd": true,
+    "browser": true,
+    "es6": true
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "babel"
+  ],
+  "rules": {
+    "no-unused-vars": "off"
+  }
+}

package/test/use-cases/asset-content-type/asset-content-type.test.js

@@ -0,0 +1,50 @@
+const assert = require('chai').assert;
+const parse = require('xml-parser');
+const webpack = require('webpack');
+const fs = require('fs');
+const path = require('path');
+
+const targetDir = path.join(__dirname, 'target');
+const webresourceOutput = path.join(targetDir, 'META-INF', 'plugin-descriptor', 'wr-webpack-bundles.xml');
+
+describe('asset-content-type', function() {
+    const config = require('./webpack.config.js');
+
+    let stats;
+    let assets;
+    let resources;
+
+    beforeEach(done => {
+        webpack(config, (err, st) => {
+            stats = st;
+
+            const xmlFile = fs.readFileSync(webresourceOutput, 'utf-8');
+            const results = parse(xmlFile);
+            assets = results.root.children.find(n => n.attributes.key.startsWith('assets'));
+            resources = assets.children.filter(n => n.name === 'resource');
+            done();
+        });
+    });
+
+    it('should create an "asset"-webresource containing the asset', () => {
+        assert.ok(assets);
+        assert.equal(stats.hasErrors(), false);
+        assert.equal(stats.hasWarnings(), false);
+        assert.equal(resources[0].attributes.type, 'download');
+        assert.equal(path.extname(resources[0].attributes.name), '.png');
+    });
+
+    it('should add all assets to the "asset"-webresource', () => {
+        assert.ok(assets);
+        assert.equal(stats.hasErrors(), false);
+        assert.equal(stats.hasWarnings(), false);
+        assert.equal(resources.length, 2);
+        assert.equal(resources[0].attributes.type, 'download');
+        assert.equal(path.extname(resources[0].attributes.name), '.png');
+        assert.equal(resources[1].attributes.type, 'download');
+        assert.equal(path.extname(resources[1].attributes.name), '.svg');
+        assert.equal(resources[1].children.length, 1, 'should contain a "param" child.');
+        assert.equal(resources[1].children[0].attributes.name, 'content-type', 'Type of param.');
+        assert.equal(resources[1].children[0].attributes.value, 'image/svg+xml', 'Value of param.');
+    });
+});

package/test/use-cases/asset-content-type/src/app.js

@@ -0,0 +1,8 @@
+import logo from './ice.png';
+import logo2 from './rect.svg';
+
+const image = new Image();
+image.src = logo;
+
+const image2 = new Image();
+image2.src = logo2;

package/test/use-cases/asset-content-type/src/rect.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="48px" height="64px" viewBox="0 0 48 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <rect width="48" height="64" style="fill:rgb(0,0,255)" />
+</svg>

package/test/use-cases/asset-content-type/webpack.config.js

@@ -0,0 +1,33 @@
+const path = require('path');
+const WrmPlugin = require('../../../src/WrmPlugin');
+const FRONTEND_SRC_DIR = path.join(__dirname, 'src');
+const OUTPUT_DIR = path.join(__dirname, 'target');
+
+module.exports = {
+    mode: 'development',
+    entry: {
+        app: path.join(FRONTEND_SRC_DIR, 'app.js'),
+    },
+    module: {
+        rules: [
+            {
+                test: /\.(png|svg)$/,
+                loader: 'file-loader',
+            },
+        ],
+    },
+    plugins: [
+        new WrmPlugin({
+            pluginKey: 'com.atlassian.plugin.test',
+            xmlDescriptors: path.join(OUTPUT_DIR, 'META-INF', 'plugin-descriptor', 'wr-webpack-bundles.xml'),
+            verbose: false,
+            assetContentTypes: {
+                svg: 'image/svg+xml',
+            },
+        }),
+    ],
+    output: {
+        filename: '[name].js',
+        path: OUTPUT_DIR,
+    },
+};