Skip to content

Latest commit

 

History

History
638 lines (376 loc) · 25 KB

CHANGELOG.md

File metadata and controls

638 lines (376 loc) · 25 KB

@tabula/forge

4.0.2

Patch Changes

4.0.2-next.0

Patch Changes

4.0.1

Patch Changes

4.0.0

Major Changes

  • #80 3dd45b9 Thanks @demiazz! - add auto import of bundled CSS styles to the end of JS bundle

Patch Changes

4.0.0-next.0

Major Changes

  • #80 3dd45b9 Thanks @demiazz! - add auto import of bundled CSS styles to the end of JS bundle

Patch Changes

3.0.0

Major Changes

Minor Changes

2.0.3

Patch Changes

2.0.2

Patch Changes

2.0.1

Patch Changes

2.0.0

Major Changes

Minor Changes

  • #62 bcd685a Thanks @demiazz! - emulate Vite's environment variables

    The vanilla-extract uses esbuild under the hood with CJS format. In that case, if you import any code with usage of import.

    We assume usage only import.meta.env.DEV, import.meta.env.PROD and import.meta.env.MODE variables in bundler user's code and emulate only it with defining constants.

    But this constants working only in compile time when CSS is generated and based on mode in which the forge is running at compilation moment.

    Be careful when use code which based on that variables in your vanilla-extract styles.

  • #57 d3c40d7 Thanks @demiazz! - added support of transformation of SVG component name with svgrComponentName option.

    By default, SVGR uses Svg<CamelCaseFileName> name for components. You can override this behaviour through svgrComponentName options, which should be function of format (svgrName: string) => string.

    Example:

    export default {
  // ...
  svgrComponentName(name) {
    return `Ui${name.slice(3)}Icon`;
  },
  // ...
};

    If you have a file column.svg then component name is SvgColumn by default. But with config from about the name will be UiColumnIcon.

    If you use memoization it looks like:

    import { memo } from 'react';

const UiColumnIcon = (props) => {
  // ...
};

const Memo = memo(UiColumnIcon);

export { Memo as ReactComponent };

    This option doesn't affect named exports.

  • #57 d3c40d7 Thanks @demiazz! - allow to append displayName for SVGR components.

    By default, SVGR doesn't append displayName for exported components. You can add this behaviour through svgrDisplayName option, which should be function of format (componentName: string) => string | { displayName: string; isDebugOnly?: boolean }.

    When function is returns string, then isDebugOnly equals to false.

    The componentName is name of component itself (before memoization if enabled). If you provide svgrComponentName option, then result of applying this function is componentName.

    The isDebugOnly enables wrapping the assignment in Vite compatible condition.

    // `isDebugOnly` = false

Component.displayName = 'scope(ComponentDisplayName)';

// `isDebugOnly` = true

if (import.meta.env.DEV) {
  Component.displayName = `scope(ComponentDisplayName)`;
}

    If memoization is enabled, then the displayName will be assigned to the memoized component:

    const Component = (props) => {
  // ...
};

const Memo = memo(Component);

Memo.displayName = `scope(ComponentDisplayName)`;

Patch Changes

2.0.0-next.2

Minor Changes

  • #62 bcd685a Thanks @demiazz! - emulate Vite's environment variables

    The vanilla-extract uses esbuild under the hood with CJS format. In that case, if you import any code with usage of import.

    We assume usage only import.meta.env.DEV, import.meta.env.PROD and import.meta.env.MODE variables in bundler user's code and emulate only it with defining constants.

    But this constants working only in compile time when CSS is generated and based on mode in which the forge is running at compilation moment.

    Be careful when use code which based on that variables in your vanilla-extract styles.

2.0.0-next.1

Major Changes

2.0.0-next.0

Major Changes

Minor Changes

  • #57 d3c40d7 Thanks @demiazz! - added support of transformation of SVG component name with svgrComponentName option.

    By default, SVGR uses Svg<CamelCaseFileName> name for components. You can override this behaviour through svgrComponentName options, which should be function of format (svgrName: string) => string.

    Example:

    export default {
  // ...
  svgrComponentName(name) {
    return `Ui${name.slice(3)}Icon`;
  },
  // ...
};

    If you have a file column.svg then component name is SvgColumn by default. But with config from about the name will be UiColumnIcon.

    If you use memoization it looks like:

    import { memo } from 'react';

const UiColumnIcon = (props) => {
  // ...
};

const Memo = memo(UiColumnIcon);

export { Memo as ReactComponent };

    This option doesn't affect named exports.

  • #57 d3c40d7 Thanks @demiazz! - allow to append displayName for SVGR components.

    By default, SVGR doesn't append displayName for exported components. You can add this behaviour through svgrDisplayName option, which should be function of format (componentName: string) => string | { displayName: string; isDebugOnly?: boolean }.

    When function is returns string, then isDebugOnly equals to false.

    The componentName is name of component itself (before memoization if enabled). If you provide svgrComponentName option, then result of applying this function is componentName.

    The isDebugOnly enables wrapping the assignment in Vite compatible condition.

    // `isDebugOnly` = false

Component.displayName = 'scope(ComponentDisplayName)';

// `isDebugOnly` = true

if (import.meta.env.DEV) {
  Component.displayName = `scope(ComponentDisplayName)`;
}

    If memoization is enabled, then the displayName will be assigned to the memoized component:

    const Component = (props) => {
  // ...
};

const Memo = memo(Component);

Memo.displayName = `scope(ComponentDisplayName)`;

Patch Changes

1.3.5

Patch Changes

1.3.4

Patch Changes

1.3.3

Patch Changes

1.3.2

Patch Changes

1.3.1

Patch Changes

1.3.0

Minor Changes

  • #36 8bb0af7 Thanks @demiazz! - add correct handling of user defined displayName property when Storybook docs are generated

1.2.0

Minor Changes

  • #32 a92544c Thanks @demiazz! - added cssClassPrefix option

    The option can be boolean or string.

    If string option is used, then it will be used as simple template with following placeholders:

    • [full-name] - full package name (with scope if it presented);
    • [scope] - package scope if presented or an empty string;
    • [name] - package name without scope.

    The prefix has format [full-name]__ by default or when option is true.

    When package name is awesome-ui, then:

    • when the option is [full-name]__, then the prefix is awesome_ui__;
    • when the option is [scope]__, then the prefix is __;
    • when the option is [scope]__[name]__, then the prefix is __awesome_ui__.

    When package name is @awesome-ui/theme, then:

    • when the option is [full-name]__, then the prefix is awesome_ui_theme_;
    • when the option is [scope]__, then the prefix is awesome_ui__;
    • when the option is [scope]__[name]__, then the prefix is awesome_ui__theme__.

Patch Changes

1.1.3

Patch Changes

1.1.2

Patch Changes

1.1.1

Patch Changes

  • #25 4e5e4cf Thanks @demiazz! - skip undocumented props when generate metadata for Storybook

1.1.0

Minor Changes

  • #23 d81e5d4 Thanks @demiazz! - don't wrap SVG components with React.memo by default

    If you need to change this behaviour, you can use .svgrrc files, which supported out of the box, instead of exportType, namedExport and svgo options. They are set up by the forge itself.

1.0.3

Patch Changes

1.0.2

Patch Changes

1.0.1

Patch Changes

1.0.0

Major Changes

  • #14 b0d7f4c Thanks @demiazz! - merge build and watch commands.

    The watch command has been replaced with -w,--watch option. Also, we replace platform command with -t,--target option.

    You should change:

    forge watch node

    to the following code:

    forge build --target node --watch

Minor Changes

  • #14 b0d7f4c Thanks @demiazz! - add support of configuration file

    You can use configuration file. We're looking for:

    • a forge property in the package.json;
    • a JSON or YAML .forgerc file;
    • an .forgerc file with .json, .yaml, .yml, .js, .mjs or .cjs
    • any of the above two inside a .config subdirectory;
    • a forge.config.js, forge.config.mjs, or forge.config.cjs file.

    Look at example of JSON configuration:

    {
  "$schema": "https://github.com/ReTable/forge/blob/main/schemas/forgerc.json",

  "target": "node",

  "entry": "index",

  "check": true,
  "typings": true,

  "postBuild": "touch lib/meta.js",

  "build": {
    "production": true
  },

  "watch": {
    "production": false,
    "storybook": true
  }
}

  • #14 b0d7f4c Thanks @demiazz! - add support of post build hooks

    You can use one or more post build hooks:

    forge build --target node --post-build "touch lib/index.js" --post-build "touch index.d.ts":"typings"

Patch Changes

  • #14 b0d7f4c Thanks @demiazz! - add init command

    You can generate .forgerc with init command.

    Example:

    forge init --target node

0.3.0

Minor Changes

  • #12 0813828 Thanks @demiazz! - add support of multiple entries

    You can use --entry option to define entry points.

    The --entry option has the following syntax: --entry <in>[:<out>]. You can use this option more than one time to define multiple entries.

    Default behaviour

    By default, the forge always searches <packageRoot>/src/index.tsx or <packageRoot>/src/index.ts entry point, and always bundles it to the <packageRoot>/lib/index.js.

    The following command:

    $ forge build browser

    is equivalent to this command:

    $ forge build browser --entry index

    Input format

    We allow to define input module as path to file or as path to module. A given path will be automatically prepended by ./src/ path before it will be transferred to the esbuild.

    If you provide a module path, then the forge will search entry point in different ways.

    For example, look at the next command:

    $ forge build browser --entry nodes

    The forge will search entry point in the following order:

    • <packageRoot>/src/nodes.tsx
    • <packageRoot>/src/nodes.ts
    • <packageRoot>/src/nodes/index.tsx
    • <packageRoot>/src/nodes/index.ts

    Output format

    By default, the forge uses module path relative to the <packageRoot>/src directory.

    For example, look at this command:

    $ forge build browser --entry nodes

    The forge create <packageRoot>/lib/nodes.js bundle independent of entry point (nodes.ts or nodes/index.ts).

    But if you call it in the following style:

    $ forge build browser --entry nodes/index

    Then the <packageRoot>/lib/nodes/index.js will be created.

    Also, don't provide .js extension for output entry. It will be added automatically.

    But even if you provide it, then we automatically remove it before calling of esbuild to prevent creating a file with doubled .js extension.

    Code Splitting

    Support of multiple entries enables code splitting feature to share the code inside a bundled library.

    It creates ESM modules with shared code and uses them in bundles.

    Each JS bundle will automatically import own CSS bundle in beginning of file if a CSS bundle is exists.

    IMPORTANT: This feature not working with CSS. Yes, your imports from CSS modules or vanilla-extract will be shared, but own CSS bundle will be created for each JS bundle, even they have a similar styles inside. Hashed classes will be identical in all CSS bundles too. Keep it in mind.

Patch Changes

0.2.3

Patch Changes

0.2.2

Patch Changes

  • #8 23ff8c4 Thanks @demiazz! - add support of import css files from in the vanilla-extract plugin

0.2.1

Patch Changes

0.2.0

Minor Changes

  • #4 8dddd8d Thanks @demiazz! - adds support of packages resolve in the Sass

    The forge resolves external packages through ~<pkg> urls.

    Example:

    @use '~@tabula/ui-theme' as theme;

.root {
  background-color: theme.$color--primary;
}

    It will search <pkg> in dependencies through Node.js require, and try to read sass field in the package.json of the founded package.

    Example:

    {
  "name": "@tabula/ui-theme",
  "sass": "./sass/index.scss"
}

    will be resolved to the <node_modules>/@tabula/ui-theme/sass/index.scss.

Patch Changes

0.1.1

Patch Changes

0.1.0

Minor Changes