@abcnews/aunty 16.0.1 → 17.0.0-next.2

package/src/config/webpack.js

@@ -1,325 +0,0 @@
-// Native
-const { existsSync } = require('fs');
-const { join, resolve } = require('path');
-
-// External
-const importLazy = require('import-lazy')(require);
-const CopyPlugin = importLazy('copy-webpack-plugin');
-const Dotenv = importLazy('dotenv-webpack');
-const ForkTsCheckerWebpackPlugin = importLazy('fork-ts-checker-webpack-plugin');
-const MiniCssExtractPlugin = importLazy('mini-css-extract-plugin');
-const sveltePreprocess = importLazy('svelte-preprocess');
-const EnvironmentPlugin = importLazy('webpack/lib/EnvironmentPlugin');
-
-// Ours
-const { combine, merge } = require('../utils/structures');
-const { getBabelConfig } = require('./babel');
-const { getBuildConfig } = require('./build');
-const { getProjectConfig } = require('./project');
-
-const JSX_RESOLVE_EXTENSIONS = ['.jsx', '.tsx'];
-
-/**
- * Project types to override the Webpack config.
- */
-const PROJECT_TYPES_CONFIG = {
-  preact: {
-    resolve: {
-      alias: {
-        react: 'preact',
-        'react-dom': 'preact/compat'
-      },
-
-      extensions: JSX_RESOLVE_EXTENSIONS
-    }
-  },
-  react: {
-    resolve: {
-      extensions: JSX_RESOLVE_EXTENSIONS
-    }
-  },
-
-  /**
-   * Svelte uses a function to modify the existing config, rather than just merging in.
-   * @see combine
-   */
-  svelte: config => {
-    config.resolve = {
-      extensions: [...config.resolve.extensions, '.svelte'],
-      mainFields: ['svelte', 'browser', 'module', 'main'],
-      conditionNames: ['svelte', 'browser', 'import']
-    };
-
-    const { include, loader, options } = getHintedRule(config, 'scripts');
-    const extractCSS = getHintedRule(config, 'styles').use[0].loader === MiniCssExtractPlugin.loader;
-
-    include.push(/(node_modules\/svelte)/);
-
-    // options from https://github.com/sveltejs/svelte-loader
-    config.module.rules.push(
-      ...[
-        {
-          test: /\.svelte\.ts$/,
-          use: [
-            {
-              loader,
-              options
-            },
-            { loader: require.resolve('ts-loader'), options: { transpileOnly: true } },
-            {
-              loader: require.resolve('svelte-loader'),
-              options: {
-                dev: config.mode === 'development',
-                emitCss: extractCSS,
-                preprocess: sveltePreprocess()
-              }
-            }
-          ]
-        },
-        {
-          test: /(?<!\.svelte)\.ts$/,
-          loader: require.resolve('ts-loader'),
-          options: {
-            transpileOnly: true // you should use svelte-check for type checking
-          }
-        },
-        {
-          // Svelte 5+:
-          test: /\.(svelte|svelte\.js)$/,
-          include,
-          use: [
-            {
-              loader,
-              options
-            },
-            {
-              loader: require.resolve('svelte-loader'),
-              options: {
-                dev: config.mode === 'development',
-                emitCss: extractCSS,
-                preprocess: sveltePreprocess()
-              }
-            }
-          ]
-        },
-        {
-          // required to prevent errors from Svelte on Webpack 5+, omit on Webpack 4
-          test: /node_modules\/svelte\/.*\.mjs$/,
-          resolve: {
-            fullySpecified: false
-          }
-        }
-      ]
-    );
-
-    return config;
-  }
-};
-const WEBPACK_CONFIG_FILE = 'webpack.config.js';
-
-module.exports.getWebpackConfig = () => {
-  const { root } = getProjectConfig();
-  const { addModernJS, showDeprecations } = getBuildConfig();
-  const customWebpackConfigFilePath = join(root, WEBPACK_CONFIG_FILE);
-
-  if (showDeprecations) {
-    process.traceDeprecation = true;
-  } else {
-    process.noDeprecation = true;
-  }
-
-  let config;
-
-  // If the project has a webpack config file, use it, otherwise create our own
-  if (existsSync(customWebpackConfigFilePath)) {
-    config = require(customWebpackConfigFilePath);
-
-    if (!Array.isArray(config)) {
-      config = [config];
-    }
-
-    // Ensure functions are resolved to objects
-    config = config.map(combine);
-  } else {
-    config = [createWebpackConfig()];
-
-    // Duplicate the config if the project expects an additional modern JS build
-    if (addModernJS) {
-      config.push(createWebpackConfig({ isModernJS: true }));
-    }
-  }
-
-  return config;
-};
-
-const createEntriesDictionary = (root, from, entry) =>
-  (Array.isArray(entry) ? entry : [entry]).reduce(
-    (memo, _entry) => ({ ...memo, [_entry]: [join(root, from, _entry)] }),
-    {}
-  );
-
-const resolveIncludedDependencies = (includedDependencies, root) => {
-  if (!Array.isArray(includedDependencies)) {
-    return [];
-  }
-
-  return includedDependencies.map(packageNameOrPattern => {
-    if (typeof packageNameOrPattern === 'string') {
-      return resolve(root, 'node_modules', packageNameOrPattern);
-    }
-
-    if (packageNameOrPattern instanceof RegExp) {
-      return new RegExp(join('node_modules', packageNameOrPattern.source), packageNameOrPattern.flags);
-    }
-
-    return null;
-  });
-};
-
-function createWebpackConfig({ isModernJS } = {}) {
-  const { pkg, root, hasTS, type, webpack: projectWebpackConfig } = getProjectConfig();
-  const { entry, extractCSS, from, includedDependencies, staticDir, to, useCSSModules } = getBuildConfig();
-  const isProd = process.env.NODE_ENV === 'production';
-  const hasEnvFile = existsSync(join(root, '.env'));
-  const hasEnvExampleFile = existsSync(join(root, '.env.example'));
-
-  const config = merge(
-    {
-      mode: isProd ? 'production' : 'development',
-      target: isModernJS ? 'web' : ['web', 'es5'],
-      cache: true,
-      entry: createEntriesDictionary(root, from, entry),
-      devtool: 'source-map',
-      output: {
-        path: join(root, to),
-        publicPath: '/',
-        filename: isModernJS ? '[name]_modern.js' : '[name].js'
-      },
-      resolve: {
-        extensions: ['.mjs', '.js', '.json', '.ts']
-      },
-      module: {
-        rules: [
-          {
-            /**
-             * hints are used by PROJECT_TYPES_CONFIGs to quickly select the right config.
-             * @see PROJECT_TYPES_CONFIG
-             */
-            __hint__: 'scripts',
-            test: hasTS ? /\.m?[jt]sx?$/ : /\.m?jsx?$/,
-            include: [resolve(root, from)].concat(resolveIncludedDependencies(includedDependencies, root)),
-            loader: require.resolve('babel-loader'),
-            options: getBabelConfig({ isModernJS })
-          },
-          {
-            __hint__: 'styles',
-            test: /\.(css|scss)$/,
-            use: [
-              extractCSS
-                ? {
-                    loader: MiniCssExtractPlugin.loader
-                  }
-                : {
-                    loader: require.resolve('style-loader')
-                  },
-              {
-                loader: require.resolve('css-loader'),
-                options: {
-                  modules: useCSSModules && {
-                    exportLocalsConvention: 'camelCase',
-                    localIdentContext: __dirname,
-                    //  ^^^ https://github.com/webpack-contrib/css-loader/issues/413#issuecomment-299578180
-                    localIdentHashSalt: `${pkg.name}@${pkg.version}`,
-                    localIdentName: `${isProd ? '' : '[folder]-[name]__[local]--'}[hash:base64:6]`
-                  },
-                  sourceMap: !isProd
-                }
-              },
-              {
-                loader: require.resolve('sass-loader')
-              }
-            ]
-          },
-          {
-            __hint__: 'data',
-            test: /\.[tc]sv$/,
-            loader: 'csv-loader',
-            options: {
-              dynamicTyping: true,
-              header: true,
-              skipEmptyLines: true
-            }
-          },
-          {
-            test: /\.(jpg|png|gif|mp4|m4v|flv|mp3|wav|m4a|eot|ttf|woff|woff2|webm|webp|avif)$/,
-            type: 'asset'
-          },
-          {
-            test: /\.svg$/,
-            resourceQuery: { not: [/raw/] },
-            type: 'asset'
-          },
-          {
-            resourceQuery: /raw/,
-            type: 'asset/source'
-          },
-          {
-            test: /\.html$/,
-            type: 'asset/source'
-          }
-        ]
-      },
-      plugins: [
-        new EnvironmentPlugin(Object.keys(process.env)),
-        hasEnvFile || hasEnvExampleFile
-          ? new Dotenv({
-              safe: hasEnvExampleFile
-            })
-          : null,
-        hasTS
-          ? new ForkTsCheckerWebpackPlugin({
-              logger: { infrastructure: 'silent', issues: 'silent' },
-              typescript: {
-                diagnosticOptions: {
-                  semantic: true,
-                  syntactic: true
-                }
-              }
-            })
-          : null,
-        extractCSS
-          ? new MiniCssExtractPlugin({
-              filename: `[name].css`
-            })
-          : null,
-        new CopyPlugin({
-          patterns: (Array.isArray(staticDir) ? staticDir : [staticDir]).map(dirName => ({
-            from: join(root, dirName)
-          }))
-        })
-      ].filter(x => x),
-      optimization: {
-        moduleIds: isProd ? 'deterministic' : 'named'
-      }
-    },
-    PROJECT_TYPES_CONFIG[type],
-    projectWebpackConfig
-  );
-
-  if (isProd) {
-    config.optimization.minimize = true;
-  }
-
-  // Cleanup hints
-  config.module.rules.forEach(rule => {
-    if (rule.__hint__) {
-      delete rule.__hint__;
-    }
-  });
-
-  return config;
-}
-
-function getHintedRule(config, hint) {
-  return config.module.rules.find(rule => rule.__hint__ === hint);
-}

package/src/config/webpackDevServer.js

@@ -1,46 +0,0 @@
-// Native
-const { join } = require('path');
-
-// Ours
-const { combine } = require('../utils/structures');
-const { getBuildConfig } = require('./build');
-const { getProjectConfig } = require('./project');
-const { getServeConfig } = require('./serve');
-
-module.exports.getWebpackDevServerConfig = async () => {
-  const { root, webpackDevServer: projectWebpackDevServerConfig } = getProjectConfig();
-  const { staticDir } = getBuildConfig();
-  const { host, hot, https, port } = await getServeConfig();
-
-  return combine(
-    {
-      allowedHosts: 'all',
-      client: {
-        logging: 'warn',
-        overlay: true,
-        webSocketURL: `ws${https ? 's' : ''}://${host}:${port}/ws`
-      },
-      devMiddleware: {
-        publicPath: `http${https ? 's' : ''}://${host}:${port}/`
-      },
-      headers: {
-        'Access-Control-Allow-Origin': '*'
-      },
-      host: '0.0.0.0',
-      hot,
-      port,
-      server: https
-        ? typeof https === 'object'
-          ? {
-              type: 'https',
-              options: https
-            }
-          : 'https'
-        : 'http',
-      static: (Array.isArray(staticDir) ? staticDir : [staticDir]).map(dirName => ({
-        directory: join(root, dirName)
-      }))
-    },
-    projectWebpackDevServerConfig
-  );
-};

package/src/constants.js

@@ -1,7 +0,0 @@
-module.exports = {
-  OUTPUT_DIRECTORY_NAME: '.aunty',
-  BUILD_DIRECTORY_NAME: 'build',
-  DEPLOY_FILE_NAME: 'deploy.json',
-  PROJECT_CONFIG_FILE_NAME: 'aunty.config.js',
-  INTERNAL_TEST_HOST: 'master-news-web.news-web-developer.presentation-layer.abc-prod.net.au'
-};

package/src/generators/component/index.js

@@ -1,172 +0,0 @@
-// External
-const Inflect = require('i')();
-const Generator = require('yeoman-generator');
-
-// Ours
-const { getProjectConfig } = require('../../config/project');
-const { cmd, hvy, opt } = require('../../utils/color');
-const { success } = require('../../utils/logging');
-const { installDependencies } = require('../../utils/npm');
-const { combine } = require('../../utils/structures');
-
-/**
- * Generate a Component
- */
-module.exports = class extends Generator {
-  constructor(args, opts) {
-    super(args, {
-      ...opts,
-      localConfigOnly: true
-    });
-
-    this.argument('name', { required: false });
-
-    this.option('template', {
-      description: 'Type of project [basic|preact|react|svelte]'
-    });
-    this.option('d3', { description: 'This component will use D3' });
-
-    this.dependencies = [];
-    this.devDependencies = [];
-  }
-
-  usage() {
-    return `${cmd('aunty generate component')} -- ${opt('[options] [<name>]')}`;
-  }
-
-  initializing() {
-    try {
-      const { root, type, hasTS } = getProjectConfig();
-
-      process.chdir(root);
-      this.destinationRoot(root);
-      this.options.template = type;
-      this.options.typescript = hasTS;
-    } catch (err) {}
-  }
-
-  async prompting() {
-    let prompts = [];
-
-    if (!this.options.template) {
-      prompts.push({
-        type: 'list',
-        name: 'template',
-        message: 'What type of project is it again?',
-        choices: [
-          { name: 'Preact', value: 'preact' },
-          { name: 'Basic', value: 'basic' },
-          { name: 'React', value: 'react' },
-          { name: 'Svelte', value: 'svelte' }
-        ]
-      });
-    }
-
-    if (!this.options.name) {
-      prompts.push({
-        type: 'input',
-        name: 'name',
-        message: 'Component name?',
-        default: 'NewComponent'
-      });
-    }
-
-    if (!this.options.d3) {
-      prompts.push({
-        type: 'confirm',
-        name: 'd3',
-        message: 'Is this a D3 component?',
-        default: false
-      });
-    }
-
-    if (prompts.length > 0) {
-      const answers = await this.prompt(prompts);
-      this.options = combine(this.options, answers);
-    }
-
-    this.options.name = Inflect.camelize(this.options.name.replace(' ', '_'));
-  }
-
-  writing() {
-    const isSFC = this.options.template === 'svelte';
-    const isJSX = this.options.template === 'preact' || this.options.template === 'react';
-    const sourceName = `component${this.options.d3 ? '-with-d3' : ''}`;
-    const sourceScriptExt = isJSX ? 'tsx' : 'ts';
-    const destinationScriptExt = this.options.typescript ? sourceScriptExt : 'js';
-    const context = {
-      className: this.options.name,
-      isTS: this.options.typescript
-    };
-
-    if (isSFC) {
-      this.fs.copyTpl(
-        this.templatePath(this.options.template, `${sourceName}.${this.options.template}`),
-        this.destinationPath(`src/components/${this.options.name}/${this.options.name}.${this.options.template}`),
-        context
-      );
-    } else {
-      this.fs.copyTpl(
-        this.templatePath(this.options.template, `${sourceName}.${sourceScriptExt}`),
-        this.destinationPath(`src/components/${this.options.name}/index.${destinationScriptExt}`),
-        context,
-        { globOptions: { noext: true } }
-      );
-      this.fs.copy(
-        this.templatePath(`_non_sfc/styles.scss`),
-        this.destinationPath(`src/components/${this.options.name}/styles.scss`),
-        context
-      );
-    }
-
-    this.fs.copyTpl(
-      this.templatePath(this.options.template, `${sourceName}.test.${sourceScriptExt}`),
-      this.destinationPath(
-        `src/components/${this.options.name}/${isSFC ? this.options.name : 'index'}.test.${destinationScriptExt}`
-      ),
-      context,
-      { globOptions: { noext: true } }
-    );
-  }
-
-  async install() {
-    if (this.options.typescript) {
-      this.devDependencies.push('@types/jest', '@types/webpack-env');
-    }
-
-    if (this.options.d3) {
-      this.dependencies.push('d3-selection');
-
-      if (this.options.typescript) {
-        this.devDependencies.push('@types/d3-selection');
-      }
-    }
-
-    switch (this.options.template) {
-      case 'preact':
-        this.devDependencies.push('html-looks-like', 'preact-render-to-string');
-        this.dependencies.push('preact');
-        break;
-      case 'react':
-        this.devDependencies.push(
-          'react-test-renderer',
-          ...(this.options.typescript ? ['@types/react', '@types/react-dom', '@types/react-test-renderer'] : [])
-        );
-        this.dependencies.push('react', 'react-dom');
-        break;
-      case 'svelte':
-        this.devDependencies.push('@testing-library/svelte');
-        this.dependencies.push('svelte');
-        break;
-      default:
-        break;
-    }
-
-    await installDependencies(this.devDependencies.sort(), ['--save-dev'], this.log);
-    await installDependencies(this.dependencies.sort(), null, this.log);
-  }
-
-  end() {
-    success(`Created ${hvy(this.options.name)} component`);
-  }
-};

package/src/generators/component/templates/_non_sfc/styles.scss

@@ -1,6 +0,0 @@
-.root {
-  border: 1px solid rgb(255, 115, 0);
-  padding: 20px;
-  text-align: center;
-  color: black;
-}

package/src/generators/component/templates/basic/component-with-d3.test.ts

@@ -1,7 +0,0 @@
-import <%= className %> from '.';
-
-test('it renders', () => {
-  const component = new <%= className %>();
-
-  expect(component.el.innerHTML).toContain('<svg');
-});

package/src/generators/component/templates/basic/component-with-d3.ts

@@ -1,30 +0,0 @@
-import { select<% if (isTS) { %>, Selection<% } %> } from 'd3-selection';
-import styles from './styles.scss';
-
-export default class <%= className %> {<% if (isTS) { %>
-  el: Element;
-  svg: Selection<SVGSVGElement, unknown, null, undefined>;
-  g: Selection<SVGGElement, unknown, null, undefined>;
-  rect: Selection<SVGRectElement, any, any, any>;
-<% } %>
-  constructor() {
-    this.el = document.createElement('div');
-    this.el.className = styles.root;
-
-    this.svg = select(this.el)
-      .append('svg')
-      .attr('width', 400)
-      .attr('height', 300);
-
-    this.g = this.svg.append('g').attr('fill', 'black');
-
-    this.rect = this.g
-      .append('rect')
-      .attr('x', 0)
-      .attr('y', 0)
-      .attr('rx', 3)
-      .attr('ry', 3)
-      .attr('width', '100%')
-      .attr('height', '100%');
-  }
-}

package/src/generators/component/templates/basic/component.test.ts

@@ -1,7 +0,0 @@
-import <%= className %> from '.';
-
-test('it renders', () => {
-  const component = new <%= className %>();
-
-  expect(component.el.innerHTML).toContain('Find me in');
-});

package/src/generators/component/templates/basic/component.ts

@@ -1,11 +0,0 @@
-import styles from './styles.scss';
-
-export default class <%= className %> {<% if (isTS) { %>
-  el: Element;
-<% } %>
-  constructor() {
-    this.el = document.createElement('div');
-    this.el.className = styles.root;
-    this.el.innerHTML = `Find me in <strong>src/components/<%= className %></strong>`;
-  }
-}

package/src/generators/component/templates/preact/component-with-d3.test.tsx

@@ -1,16 +0,0 @@
-import { h } from 'preact';
-import render from 'preact-render-to-string';
-import htmlLooksLike from 'html-looks-like';
-
-import <%= className %> from '.';
-
-describe('<%= className %>', () => {
-  test('It renders', () => {
-    const actual = render(<<%= className %> />);
-    const expected = `
-      <div></div>
-    `;
-
-    htmlLooksLike(actual, expected);
-  });
-});

package/src/generators/component/templates/preact/component-with-d3.tsx

@@ -1,45 +0,0 @@
-import { select<% if (isTS) { %>, Selection<% } %> } from 'd3-selection';
-import { h<% if (isTS) { %>, FunctionalComponent<% } %> } from 'preact';
-import { useEffect, useRef } from 'preact/hooks';
-import styles from './styles.scss';
-<% if (isTS) { %>
-type <%= className %>Props = {
-  color?: string;
-}
-<% } %>
-const <%= className %><% if (isTS) { %>: FunctionalComponent<<%= className %>Props><% } %> = ({ color = 'black' }) => {
-  const root = useRef<% if (isTS) { %><Element | null><% } %>(null);
-  const svg = useRef<% if (isTS) { %><Selection<SVGSVGElement, unknown, null, undefined> | null><% } %>(null);
-  const g = useRef<% if (isTS) { %><Selection<SVGGElement, unknown, null, undefined> | null><% } %>(null);
-  const rect = useRef<% if (isTS) { %><Selection<SVGRectElement, unknown, null, undefined> | null><% } %>(null);
-
-  useEffect(() => {
-    svg.current = select(root.current)
-      .append('svg')
-      .attr('width', 400)
-      .attr('height', 300);
-
-    g.current = svg.current.append('g');
-
-    rect.current = g.current
-      .append('rect')
-      .attr('x', 0)
-      .attr('y', 0)
-      .attr('rx', 3)
-      .attr('ry', 3)
-      .attr('width', '100%')
-      .attr('height', '100%');
-  }, []);
-
-  useEffect(() => {
-    if (!g.current) {
-      return;
-    }
-
-    g.current.attr('fill', color);
-  }, [color]);
-
-  return <div ref={root} className={styles.root}></div>;
-};
-
-export default <%= className %>;