Joomla! Issue Tracker | Joomla! CMS #34590 - Media watcher does not watch

Closed
21 Jun 2021
Medium
Build: staging
# 34590

laoneo
21 Jun 2021

Steps to reproduce the issue

Media watcher does not watch. Basically npm run watch:com_media terminates after it did run the first time. @dgrammatiko ?

laoneo - open - 21 Jun 2021

joomla-cms-bot - change - 21 Jun 2021

Labels

Added: ?

joomla-cms-bot - labeled - 21 Jun 2021

laoneo - change - 21 Jun 2021

The description was changed

laoneo - edited - 21 Jun 2021

dgrammatiko - comment - 21 Jun 2021

terminates after it did run the first time

Hmmm, my bad

Change the file build/build-modules-js/javascript/build-com_media-js.es6.js to:

const { resolve } = require('path');
const rollup = require('rollup');
const { nodeResolve } = require('@rollup/plugin-node-resolve');
const replace = require('@rollup/plugin-replace');
const { babel } = require('@rollup/plugin-babel');
const VuePlugin = require('rollup-plugin-vue');
const commonjs = require('@rollup/plugin-commonjs');
const { minifyJs } = require('./minify.es6.js');

const inputJS = 'administrator/components/com_media/resources/scripts/mediamanager.es6.js';

const buildLegacy = async (file) => {
  // eslint-disable-next-line no-console
  console.log('Building Legacy Media Manager...');

  const bundle = await rollup.rollup({
    input: file,
    plugins: [
      nodeResolve(),
      commonjs(),
      babel({
        exclude: 'node_modules/core-js/**',
        babelHelpers: 'bundled',
        babelrc: false,
        presets: [
          [
            '@babel/preset-env',
            {
              corejs: '3.8',
              useBuiltIns: 'usage',
              targets: {
                ie: '11',
              },
              loose: true,
              bugfixes: true,
              modules: false,
              ignoreBrowserslistConfig: true,
            },
          ],
        ],
      }),
    ],
    external: [],
  });

  await bundle.write({
    format: 'iife',
    sourcemap: false,
    name: 'JoomlaMediaManager',
    file: 'media/com_media/js/media-manager-es5.js',
  });

  // closes the bundle
  await bundle.close();

  // eslint-disable-next-line no-console
  console.log('Legacy Media Manager ready ✅');

  minifyJs('media/com_media/js/media-manager-es5.js');
};

module.exports.mediaManager = async () => {
  // eslint-disable-next-line no-console
  console.log('Building Media Manager ES Module...');

  const bundle = await rollup.rollup({
    input: resolve(inputJS),
    plugins: [
      VuePlugin({
        target: 'browser',
        css: false,
        compileTemplate: true,
        template: {
          isProduction: true,
        },
      }),
      nodeResolve(),
      replace({
        preventAssignment: true,
        'process.env.NODE_ENV': JSON.stringify('production'),
      }),
      babel({
        exclude: 'node_modules/core-js/**',
        babelHelpers: 'bundled',
        babelrc: false,
        presets: [
          [
            '@babel/preset-env',
            {
              targets: {
                browsers: [
                  '> 1%',
                  'not ie 11',
                  'not op_mini all',
                ],
              },
              loose: true,
              bugfixes: false,
              ignoreBrowserslistConfig: true,
            },
          ],
        ],
      }),
    ],
  });

  await bundle.write({
    format: 'es',
    sourcemap: false,
    file: 'media/com_media/js/media-manager.js',
  });

  // closes the bundle
  await bundle.close();

  // eslint-disable-next-line no-console
  console.log('✅ ES2017 Media Manager ready');
  minifyJs('media/com_media/js/media-manager.js');
  return buildLegacy(resolve('media/com_media/js/media-manager.js'));
};

module.exports.watchMediaManager = async () => {
  // eslint-disable-next-line no-console
  console.log('Watching Media Manager ES Module...');

  await rollup.watch({
    input: resolve(inputJS),
    plugins: [
      VuePlugin({
        target: 'browser',
        css: false,
        compileTemplate: true,
        template: {
          isProduction: true,
        },
      }),
      nodeResolve(),
      replace({
        preventAssignment: true,
        'process.env.NODE_ENV': JSON.stringify('production'),
      }),
      babel({
        exclude: 'node_modules/core-js/**',
        babelHelpers: 'bundled',
        babelrc: false,
        presets: [
          [
            '@babel/preset-env',
            {
              targets: {
                browsers: [
                  '> 1%',
                  'not ie 11',
                  'not op_mini all',
                ],
              },
              loose: true,
              bugfixes: false,
              ignoreBrowserslistConfig: true,
            },
          ],
        ],
      }),
    ],
    output: {
      format: 'es',
      sourcemap: false,
      file: 'media/com_media/js/media-manager.js',
    }
  });
};

and in the build/build.js change:

line 43 from

const { mediaManager } = require('./build-modules-js/javascript/build-com_media-js.es6');

const { mediaManager, watchMediaManager } = require('./build-modules-js/javascript/build-com_media-js.es6');

and line 143 from

mediaManager(true);

watchMediaManager(true);

PS: the output of the build when watching is still ES Module and it's not minified, so depending on your use case you might want to adjust the output options:

    output: {
      format: 'es',
      sourcemap: false,
      file: 'media/com_media/js/media-manager.js',
    }

dgrammatiko - comment - 21 Jun 2021

Anyways PR: #34591

alikon - change - 21 Jun 2021

Status	New	⇒	Closed
Closed_Date	0000-00-00 00:00:00	⇒	2021-06-21 16:53:32
Closed_By		⇒	alikon

alikon - close - 21 Jun 2021

alikon - comment - 21 Jun 2021

please test #34591

Add a Comment

Older
Newer

Joomla! Issue Tracker - CMS

[#34590] - Media watcher does not watch

Steps to reproduce the issue

Add a Comment