Init project

.coverage/coverage-summary.json

@@ -0,0 +1,6 @@
+{"total": {"lines":{"total":58,"covered":58,"skipped":0,"pct":100},"statements":{"total":58,"covered":58,"skipped":0,"pct":100},"functions":{"total":18,"covered":18,"skipped":0,"pct":100},"branches":{"total":32,"covered":32,"skipped":0,"pct":100}}
+,"/Users/horcrux/Work/opensources/bem-composer/src/bem.ts": {"lines":{"total":12,"covered":12,"skipped":0,"pct":100},"functions":{"total":2,"covered":2,"skipped":0,"pct":100},"statements":{"total":12,"covered":12,"skipped":0,"pct":100},"branches":{"total":8,"covered":8,"skipped":0,"pct":100}}
+,"/Users/horcrux/Work/opensources/bem-composer/src/block.ts": {"lines":{"total":13,"covered":13,"skipped":0,"pct":100},"functions":{"total":4,"covered":4,"skipped":0,"pct":100},"statements":{"total":13,"covered":13,"skipped":0,"pct":100},"branches":{"total":4,"covered":4,"skipped":0,"pct":100}}
+,"/Users/horcrux/Work/opensources/bem-composer/src/element.ts": {"lines":{"total":14,"covered":14,"skipped":0,"pct":100},"functions":{"total":6,"covered":6,"skipped":0,"pct":100},"statements":{"total":14,"covered":14,"skipped":0,"pct":100},"branches":{"total":4,"covered":4,"skipped":0,"pct":100}}
+,"/Users/horcrux/Work/opensources/bem-composer/src/modifier.ts": {"lines":{"total":19,"covered":19,"skipped":0,"pct":100},"functions":{"total":6,"covered":6,"skipped":0,"pct":100},"statements":{"total":19,"covered":19,"skipped":0,"pct":100},"branches":{"total":16,"covered":16,"skipped":0,"pct":100}}
+}

.editorconfig

@@ -0,0 +1,13 @@
+# EditorConfig is awesome: http://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc.js

@@ -0,0 +1,20 @@
+module.exports = {
+  extends: ['alloy', 'alloy/typescript'],
+  env: {
+    // Your environments (which contains several predefined global variables)
+    //
+    // browser: true,
+    // node: true,
+    // mocha: true,
+    jest: true
+  },
+  globals: {
+    // Your global variables (setting to false means it's not allowed to be reassigned)
+    //
+    // myGlobal: false
+  },
+  rules: {
+    'no-unused-vars': 'error'
+  },
+  ignorePatterns: ['dist/**/*']
+};

.gitignore

@@ -0,0 +1,80 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+#DynamoDB Local files
+.dynamodb/
+
+dist/
+.DS_Store
+

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "trailingComma": "none",
+  "singleQuote": true,
+  "printWidth": 80
+}

.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "cSpell.words": ["classname"],
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "eslint.validate": ["javascript", "typescript"],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

LICENSE

@@ -0,0 +1,5 @@
+Copyright 2021 Horcrux Chen
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE

README.md

@@ -0,0 +1,230 @@
+# BEM composer
+
+![Lines](https://img.shields.io/badge/lines-100%25-brightgreen.svg) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
+
+> A easy [BEM](https://en.bem.info/) classname tool for React, styled-components, linaria.
+> Recommend using with [classnames](https://www.npmjs.com/package/classnames).
+
+# Install
+
+## npm
+
+```
+npm i bem-composer
+```
+
+## yarn
+
+```
+yarn add bem-composer
+```
+
+# API
+
+## Output
+
+```ts
+import { bem } from 'bem-composer';
+
+// create a `button` block
+const b = bem('button');
+
+console.log(b.toString()); // 'button'
+// shortcut for .toString()
+console.log(b()); // 'button'
+console.log(b.toSelector()); // '.button'
+
+// create a `icon` element based on `b` block
+const e = b('icon');
+
+console.log(e.toString()); // 'button--icon'
+// shortcut for .toString()
+console.log(e()); // 'button--icon'
+console.log(e.toSelector()); // '.button--icon'
+console.log(e.toSuffix()); // '--icon'
+console.log(e.toParentSelector()); // '&--icon'
+
+// create a modifier based on `e` element
+const m = e('active');
+
+console.log(m.toString()); // 'button--icon__active'
+// shortcut for .toString()
+console.log(m().toString()); // 'button--icon__active'
+console.log(m.toSelector().toString()); // '.button--icon__active'
+console.log(m.toSuffix().toString()); // '__active'
+console.log(m.toParentSelector().toString()); // '&__active'
+// get suffix with element
+console.log(m.toSuffix(true).toString()); // '--icon__active'
+// get parent selector with element
+console.log(m.toParentSelector(true).toString()); // '&--icon__active'
+
+// create a modifier with value
+const mv = e({
+  name: 'active',
+  value: 'hover'
+});
+console.log(mv.toString()); // 'button--icon__active-hover'
+
+// modifier with condition
+console.log(e({
+  'active',
+  value: false
+})) // 'button--icon'
+console.log(e({
+  'active',
+  value: true
+}).toString()) // 'button--icon__active'
+
+// block with modifier
+console.log(b('', 'active').toString()); // 'button_active'
+
+
+```
+
+## Configure delimiters
+
+```ts
+import { configure, DefaultBEMDelimiters } from 'bem-composer';
+
+// Configure BEM constructor with custom delimiters.
+const cbem = configure({
+  element: '__',
+  modifier: '~~',
+  modifierValue: '~'
+});
+
+console.log(
+  cbem('block', 'icon', {
+    name: 'active',
+    value: 'hover'
+  }).toString()
+); // block__icon~~active~hover
+```
+
+## Curried API
+
+Provide a curried API to easily create elements and modifiers.
+
+```ts
+import { bem } from 'bem-composer';
+
+console.log(bem('button', 'icon')); // button--icon
+console.log(bem('button')('icon')); // button--icon
+console.log(bem('button', 'icon', 'active').toString()); // 'button--icon__active'
+console.log(bem('button')('icon', 'active').toString()); // 'button--icon__active'
+console.log(bem('button', 'icon')('active').toString()); // 'button--icon__active'
+```
+
+# React
+
+```jsx
+import React from 'react';
+import { bem } from 'bem-composer';
+import classNames from 'classnames';
+
+const b = bem('button');
+const e = b('icon');
+const m = e('active');
+
+export default function Button(props) {
+  const { active } = props;
+  return (
+    <button
+      classname={classNames([
+        b(), // 'button'
+        b('', {
+          name: 'active',
+          value: active
+        }) // button__active
+      ])}
+    >
+      <img
+        classname={classNames([
+          e(), // 'button-icon'
+          e({
+            name: 'active',
+            value: active
+          }), // active === true ? 'button--icon__active' : 'button--icon'
+          e('primary') // 'button--icon__primary'
+        ])}
+      />
+    </button>
+  );
+}
+```
+
+## BEM Constructor type definition
+
+```ts
+function bem(blockName: string): BEMBlock;
+function bem(blockName: string, elementName: string): BEMElement;
+function bem(
+  blockName: string,
+  elementName: string,
+  modifierValue: BEMModifierValue
+): BEMModifier;
+
+type BEMModifierValue =
+  | {
+      name: string;
+      value?: string | boolean;
+    }
+  | string;
+
+interface BEMBlock {
+  (): string; // shortcut for toString()
+  (elementName: string): BEMElement;
+  (
+    elementName: undefined | string,
+    modifierValue: BEMModifierValue
+  ): BEMModifier;
+  toString: () => string; // Return classname
+  toSelector: () => string; // Return classname selector
+}
+
+interface BEMElement {
+  (): string; // shortcut for toString()
+  (modifierValue: BEMModifierValue): BEMModifier;
+  toString: () => string;
+  toSelector: () => string;
+  toSuffix: () => string;
+  toParentSelector: () => string;
+}
+
+interface BEMModifier {
+  (): string;
+  toString: () => string;
+  toSelector: () => string;
+  toSuffix: (withElement?: boolean) => string;
+  toParentSelector: (withElement?: boolean) => string;
+}
+```
+
+# Styled-components & Linaria
+
+```tsx
+import styled from 'styled-components';
+
+const b = bem('button');
+const e = b('icon');
+const m = e('active');
+
+export const StyledButton = styled.button`
+  /* .button */
+  ${b.toSelector()} {
+    border: 1px solid red;
+    outline: none;
+  }
+
+  /* .button-icon */
+  ${e.toParentSelector()} {
+    width: 20px;
+    height: 20px;
+
+    /* .button--icon__active */
+    ${m.toParentSelector()} {
+      opacity: 0.5;
+    }
+  }
+`;
+```

jest.config.js

@@ -0,0 +1,7 @@
+/** @type {import('@ts-jest/dist/types').InitialOptionsTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  coverageReporters: ['json-summary'],
+  coverageDirectory: '.coverage'
+};