vuestorefront / theme-utilities Goto Github PK

View Code? Open in Web Editor NEW

8.0 28.0 3.0 117 KB

Simple theme inheritance for any JavaScript application

JavaScript 7.04% TypeScript 92.96%

vue-storefront themes nuxt javascript inheritance

theme-utilities's Introduction

Stay connected

Theme Utilities for Alokai (and not only)

Disclaimer: This project is still in beta phase.

How it works

This package creates a vsf-tu script allowing to extend multiple Alokai themes by letting them inherit from each other.

You can use it with any JavaScript application though. it does not require Vue or Nuxt to run.

Script reads files from multiple sources and copies them to destination directory. If files with the same path (relative to each source) exist in multiple sources, priority will be given to source defined later in the configuration.

Files with .vue, .ts, .js, .json, and .yml extensions are additionally parsed using ejs library, allowing them to contain build-time variables like <%= some.source.variable %>. If you want to parse all extensions, add parseAllExtensions: true to the configuration.

Install

yarn global add @vue-storefront/theme-utilities

Usage

Create a theme-utils.config.js file in the root of the project.

// theme-utils.config.js
module.exports = {
  copy: {
    parseAllExtensions: false,
    to: '',
    from: [
      {
        path: '',
        ignore: [],
        ignoreParse: [],
        variables: {},
        watch: true
      }
    ]
  }
};

Run the script:

vsf-tu

Alternatively you can use --config path/to/config/file flag to provide custom configuration path.

Configuration

Options

parseAllExtensions Whether all extensions should be compiled or only .vue, .ts, .js, .json, and .yml.
to Path to output directory. Can be relative or absolute.
from Array of source directories:
- path Path to source directory. Can be relative or absolute.
- ignore Array of ignored files/paths. Paths are glob-compatible. Contents of .nuxt and node_modules are ignored by default.
- ignoreParse Array of files that shouldn't be parsed by ejs. It overrides parseAllExtensions and file extensions parsed by default.
- variables Template variables resolved at build-time.
- watch Whether directory should be watched for changes.

Example

// theme-utils.config.js
module.exports = {
  copy: {
    to: '_theme',
    from: [
      {
        path: '@vue-storefront/nuxt-theme/theme',
        ignore: [],
        variables: {
          options: {
            generate: {
              replace: {
                apiClient: '@vue-storefront/commercetools-api',
                composables: '@vue-storefront/commercetools'
              }
            }
          }
        },
        watch: true
      },
      {
        path: '/home/Projects/VueStorefront/packages/commercetools/theme',
        ignore: [
          '*', // Ignore all files directly in the root of the directory, like package.json, tsconfig.json etc.
        ],
        variables: {},
        watch: true
      }
    ]
  }
};

theme-utilities's People

Contributors

Stargazers

Watchers

Forkers

jaydubb12 isabella232 roger120981

theme-utilities's Issues

create @vue-storefront/theme-utilities script for theme composition

Create a script that is allowing a simple, multilevel inheritance mechanism with EJS compilation but is not based on Nuxt at all.

Specification

There should be a single target (to) path where we're compiling files in EJS from source (from) directories in order.
The script should use a configuration file to determine paths and EJS variables. You can pass url to configuration with --config path/to/file.js flag and it defaults to ./theme-utils.config.js

API

export default {
 copy: {
    to: './' / where we're copying and compiling files
    from: [{ 
      path: './path1',
      vars: { variable: value },
      watch: false // watch changes in this directory and copy modified files to `to` directory. `false` by default because usually we don't modify these files
    }] // if there are 2+ paths in array we're copying them in order so the least one can override files of previous ones
 }
}

Write tests

Because tests are good

[BUG]: Failed to compile template '/Users/<user>/Projects/test-theme/vsf-core/modules/magento/plugin.ts'. Setup new project: When I try to use vsf-tu command with a new VSF Magento project on version 1.0.0-rc.10 an error appears.

When I setup a new store for Magento 2 (with VSF Magento version: 1.0.0-rc.10 ) using VSF by entering the following commands:

npx @vue-storefront/cli generate store

(Choose Magento 2)
(Project name = vsf-core)

cd vsf-core
yarn install

cd ../

Install vuestorefront/theme-utilities (it installs version @vue-storefront/[email protected])

Create theme-utils.config.js file containing:

  copy: {
    to: '_theme',
    from: [
      {
        path: 'vsf-core/',
        ignore: [],
        variables: {},
        watch: true
      },
      {
        path: 'theme/',
        ignore: [
        //   '*', // Ignore all files directly in the root of the directory, like package.json, tsconfig.json etc.
        ],
        variables: {},
        watch: true
      }
    ]
  }
};

And then run vsf-tu everything compiles just fine, but it fails for one file: vsf-core/modules/magento/plugin.ts

The error log is:


Compiled and copied 510 files to /Users/<user>/Projects/test-theme/_theme.
Failed to compile template '/Users/<user>/Projects/test-theme/vsf-core/modules/magento/plugin.ts'.
ReferenceError: /Users/<user>/Projects/test-theme/vsf-core/modules/magento/plugin.ts:7
    5| import { defaultConfig } from '~/modules/magento/defaultConfig';
    6|
 >> 7| const moduleOptions = JSON.parse('<%= JSON.stringify(options) %>');
    8|
    9| export default integrationPlugin((plugin) => {
    10|   const getCookieName = (property: keyof typeof defaultConfig['cookies']) : string => moduleOptions.cookies?.[property] ?? defaultConfig.cookies[property];

options is not defined
    at eval ("/Users/<user>/Projects/test-theme/vsf-core/modules/magento/plugin.ts":12:41)
    at plugin (/Users/<user>/.config/yarn/global/node_modules/ejs/lib/ejs.js:703:17)
    at /Users/<user>/.config/yarn/global/node_modules/ejs/lib/ejs.js:260:40
    at new Promise (<anonymous>)
    at tryHandleCache (/Users/<user>/.config/yarn/global/node_modules/ejs/lib/ejs.js:258:14)
    at Object.exports.renderFile (/Users/<user>/.config/yarn/global/node_modules/ejs/lib/ejs.js:491:10)
    at parseTemplate (/Users/<user>/.config/yarn/global/node_modules/@vue-storefront/theme-utilities/lib/index.js:144:26)
    at transformTemplate (/Users/<user>/.config/yarn/global/node_modules/@vue-storefront/theme-utilities/lib/index.js:138:47)
    at /Users/<user>/.config/yarn/global/node_modules/@vue-storefront/theme-utilities/lib/index.js:250:42
    at Map.forEach (<anonymous>) {
  path: '/Users/<user>/Projects/test-theme/vsf-core/modules/magento/plugin.ts'
}
node:internal/errors:465
    ErrorCaptureStackTrace(err);
    ^

TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received undefined
    at Object.writeFileSync (node:fs:2163:5)
    at transformTemplate (/Users/<user>/.config/yarn/global/node_modules/@vue-storefront/theme-utilities/lib/index.js:138:14)
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  code: 'ERR_INVALID_ARG_TYPE'
}

Do you maybe know how to fix this?

When I manually copy vsf-core/modules/magento/plugin.ts in the generated _theme directory the application runs just fine.

[Feature] Add a 'deploy mode' so it just copies files

Thanks for this utility, also works great for VSF 1.x

We want to be able to run vsfu-tu in deployment
The needs to be a flag we can add to the command so that it doesn't execute:

// Watch source folders for changes
watchSources({ config, sourcesMap });

This way we can also add the generated theme to a .gitignore file