[WIP] Deprecat named import

examples/register/themekit.config.js

@@ -1,14 +1,14 @@
-const { Api } = require('../../src/index')
+const Themekit = require('../../src/index')
 
-Api.registerTransform({
+Themekit.registerTransform({
   name: 'custom-transform',
   type: 'name',
   transformer(token) {
     return token.path.join('-')
   },
 })
 
-Api.registerFormat({
+Themekit.registerFormat({
   name: 'custom-format',
   formatter(dictionary) {
     const props = dictionary.allProperties
@@ -18,7 +18,7 @@ Api.registerFormat({
   },
 })
 
-Api.registerPreset({
+Themekit.registerPreset({
   name: 'custom-preset',
   transforms: ['custom-transform'],
 })

package.json

@@ -3,7 +3,14 @@
   "version": "1.6.4",
   "author": "Eugene Tropin <[email protected]>",
   "description": "Build system of design-tokens for any platforms.",
-  "keywords": ["themekit", "design", "css", "tokens", "style", "style-dictionary"],
+  "keywords": [
+    "themekit",
+    "design",
+    "css",
+    "tokens",
+    "style",
+    "style-dictionary"
+  ],
   "license": "MPL-2.0",
   "repository": "https://github.com/bem/themekit",
   "homepage": "https://github.com/bem/themekit",
@@ -68,5 +75,9 @@
     "commands": "lib/cli",
     "bin": "themekit"
   },
-  "files": ["bin", "lib", "oclif.manifest.json"]
+  "files": [
+    "bin",
+    "lib",
+    "oclif.manifest.json"
+  ]
 }

src/core/build.ts

@@ -3,7 +3,8 @@ import cssColorFn from 'css-color-function'
 import { resolve } from 'path'
 import { readFileSync, writeFileSync } from 'fs-extra'
 
-import { Api, InternalApi } from '../index'
+import Themekit from '../index'
+import ThemekitInternal from '../internal'
 import { createStyleDictionaryConfig } from './style-dictionary-config'
 import { variablesWithPrefix } from './variablesWithPrefix'
 import { loadMappers } from './mappers'
@@ -18,7 +19,7 @@ import { deprecate } from './deprecate'
 
 const context = new Map()
 
-Api.registerFormat({
+Themekit.registerFormat({
   name: 'css/whitepaper',
   formatter(dictionary, config) {
     deprecate(
@@ -45,7 +46,7 @@ Api.registerFormat({
 })
 
 // NOTE: Override default css/variables format.
-Api.registerFormat({
+Themekit.registerFormat({
   name: 'css/variables',
   formatter(dictionary, config) {
     const defaultOptions = { selector: ':root', useAliasVariables: false }
@@ -65,7 +66,7 @@ Api.registerFormat({
   },
 })
 
-Api.registerTransform({
+Themekit.registerTransform({
   name: 'name/mapper',
   type: 'name',
   transformer: (prop) => {
@@ -74,7 +75,7 @@ Api.registerTransform({
   },
 })
 
-Api.registerFilter({
+Themekit.registerFilter({
   name: 'whitepaper/color',
   matcher: (prop) => {
     if (isColor(prop.value)) {
@@ -85,7 +86,7 @@ Api.registerFilter({
   },
 })
 
-Api.registerFilter({
+Themekit.registerFilter({
   name: 'whitepaper/root',
   matcher: (prop) => {
     if (!isColor(prop.value)) {
@@ -96,7 +97,7 @@ Api.registerFilter({
   },
 })
 
-Api.registerAction({
+Themekit.registerAction({
   name: 'process-color',
   do: (_, config) => {
     for (const file of config.files) {
@@ -113,7 +114,7 @@ Api.registerAction({
   undo: () => {},
 })
 
-Api.registerPreset({
+Themekit.registerPreset({
   name: 'css',
   transforms: ['name/cti/kebab', 'name/mapper'],
   actions: ['process-color'],
@@ -130,7 +131,7 @@ export async function build(config: Config): Promise<void> {
       context.set('mapper', await loadMappers(theme.mappers))
       context.set('whitepaper', enhanceWhitepaperConfig(theme.whitepaper, platform))
 
-      const StyleDictionary = InternalApi.extend(
+      const StyleDictionary = ThemekitInternal.extend(
         createStyleDictionaryConfig({
           platform: platform,
           sources: sources,

src/core/deprecate.ts

@@ -3,3 +3,16 @@ import chalk from 'chalk'
 export function deprecate(message: string): void {
   console.error(chalk.yellow(message))
 }
+
+export function withDeprecated<T extends object>(target: T, message: string): T {
+  let isFirstShown = true
+  return new Proxy<T>(target, {
+    get(target, receiver) {
+      if (isFirstShown) {
+        deprecate(message)
+        isFirstShown = false
+      }
+      return Reflect.get(target, receiver)
+    },
+  })
+}

src/core/style-dictionary-config.ts

@@ -1,6 +1,6 @@
 import { Platform, Config } from 'style-dictionary'
 
-import { Api } from '../index'
+import Themekit from '../index'
 
 type Options = {
   sources: string[]
@@ -16,7 +16,7 @@ export function createStyleDictionaryConfig({ sources, entry, platform, output }
       const target = { ...value }
 
       if (target.preset !== undefined) {
-        const maybePrese = Api.presets.get(target.preset)
+        const maybePrese = Themekit.presets.get(target.preset)
         if (maybePrese === undefined) {
           throw new Error(`Used unexpected preset "${target.preset}" for "${key}" platform.`)
         } else {

src/index.ts

@@ -1,8 +1,9 @@
 import StyleDictionary from 'style-dictionary'
 
+import { withDeprecated } from './core/deprecate'
 import { Preset } from './index.h'
 
-export const Api = {
+const Themekit = {
   registerFormat: StyleDictionary.registerFormat.bind(StyleDictionary),
   registerTransform: StyleDictionary.registerTransform.bind(StyleDictionary),
   registerAction: StyleDictionary.registerAction.bind(StyleDictionary),
@@ -21,13 +22,14 @@ export const Api = {
    * @param preset - Preset settings
    */
   registerPreset: (preset: Preset): void => {
-    Api.presets.set(preset.name, preset)
+    Themekit.presets.set(preset.name, preset)
   },
 }
 
-/**
- * @internal
- */
-export const InternalApi = {
-  extend: StyleDictionary.extend.bind(StyleDictionary),
-}
+const Api = withDeprecated(
+  Themekit,
+  'Warning: Named import "Api" is deprecated, use default import instead.',
+)
+
+export { Api }
+module.exports = Themekit

src/internal.ts

@@ -0,0 +1,10 @@
+import StyleDictionary from 'style-dictionary'
+
+/**
+ * @internal
+ */
+const Themekit = {
+  extend: StyleDictionary.extend.bind(StyleDictionary),
+}
+
+export default Themekit