{"id":19440,"library":"decorator-transforms","title":"decorator-transforms","description":"A Babel plugin that transforms JavaScript decorators (legacy TC39 stage 1) into simpler, smaller code using modern features like class static blocks, private fields, and WeakMap. Current stable version is 2.3.1, released December 2025, with minor/patch releases every few months. Key differentiators vs @babel/plugin-proposal-decorators: significantly smaller output, avoids transpiling other class features, built-in browser compatibility options. Supports both legacy and loose mode decorators, aims for bug-for-bug compatibility with Babel's legacy decorator transform. Includes a runtime helper for decorator initialization.","status":"active","version":"2.3.1","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/ef4/decorator-transforms","tags":["javascript"],"install":[{"cmd":"npm install decorator-transforms","lang":"bash","label":"npm"},{"cmd":"yarn add decorator-transforms","lang":"bash","label":"yarn"},{"cmd":"pnpm add decorator-transforms","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Babel assumes 'decorator-transforms' means 'babel-plugin-decorator-transforms' due to naming convention; prefix with 'module:' to resolve correctly.","wrong":"plugins: ['decorator-transforms']","symbol":"default (plugin)","correct":"plugins: ['module:decorator-transforms']"},{"note":"The globals module is a side-effect import that installs runtime helpers globally. Must be imported at the very beginning of your app.","wrong":"import { globals } from 'decorator-transforms'","symbol":"globals runtime","correct":"import 'decorator-transforms/globals'"},{"note":"The runtime module uses named exports; default import may not work in all bundlers.","wrong":"import runtime from 'decorator-transforms/runtime'","symbol":"runtime import path","correct":"import * as runtime from 'decorator-transforms/runtime'"}],"quickstart":{"code":"// babel.config.js\nmodule.exports = {\n  plugins: [['module:decorator-transforms', { \n    runtime: { import: require.resolve('decorator-transforms/runtime') },\n    runEarly: true \n  }]]\n};\n\n// app.js (entry point)\nimport 'decorator-transforms/globals';\n\n// example decorated class\nfunction log(target, key, descriptor) {\n  const original = descriptor.value;\n  descriptor.value = function(...args) {\n    console.log(`Calling ${key} with`, args);\n    return original.apply(this, args);\n  };\n  return descriptor;\n}\n\nclass MyClass {\n  @log\n  greet(name) {\n    return `Hello, ${name}!`;\n  }\n}\n\nconst obj = new MyClass();\nobj.greet('World'); // logs: Calling greet with ['World']","lang":"javascript","description":"Shows minimal Babel config with runEarly and runtime import, global runtime import at app entry, and a simple decorated class."},"warnings":[{"fix":"Use 'module:decorator-transforms' or require.resolve('decorator-transforms') in plugins array.","message":"Do not use 'decorator-transforms' directly as plugin name; prefix with 'module:' or use absolute path (require.resolve).","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add import 'decorator-transforms/globals' at app entry or set runtime: { import: ... } in config.","message":"v2.0.0 changed default runtime from 'import' to 'globals'; runEarly option introduced for broader browser compat.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Remove @babel/plugin-proposal-decorators from plugins when using decorator-transforms.","message":"Incompatible with @babel/plugin-proposal-decorators; do not use both simultaneously.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Set runEarly: false (default) unless you need transpilation of private fields or static blocks.","message":"runEarly: true requires extra babel traversal; only use if targeting browsers without native private fields/static blocks.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Use runtime: 'globals' (default) and import 'decorator-transforms/globals' in app.js.","message":"Ember classic builds: only 'globals' runtime option works because ember-auto-import cannot see transform output.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure you have added import 'decorator-transforms/globals' at the very beginning of your entry file.","cause":"Missing runtime import or incorrect import path.","error":"Module not found: Can't resolve 'decorator-transforms/globals'"},{"fix":"Use 'module:decorator-transforms' or require.resolve('decorator-transforms') in babel config.","cause":"Babel cannot resolve the plugin because the name convention expects 'babel-plugin-*' prefix.","error":"Plugin 'decorator-transforms' not found"},{"fix":"Ensure Babel 7.4+ is installed and that @babel/core is a peer dependency.","cause":"Using decorator-transforms with incompatible Babel version or missing Babel peer dependencies.","error":"Transform error: Decorator transform is not supported in this environment"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}