Typescript plugin

packages/typescript-plugin/CHANGELOG.md

@@ -0,0 +1,4 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

packages/typescript-plugin/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 [these people](https://github.com/kenoxa/beamwind/graphs/contributors)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/typescript-plugin/README.md

@@ -0,0 +1,207 @@
+# @beamwind/typescript-plugincript-plugin
+
+> TypeScript language service plugin that adds IntelliSense for [beamwind](https://beamwind.js.org)
+
+[![MIT License](https://flat.badgen.net/github/license/kenoxa/beamwind)](https://github.com/kenoxa/beamwind/blob/main/LICENSE)
+[![Latest Release](https://flat.badgen.net/npm/v/@beamwind/typescript-plugin?icon=npm&label)](https://www.npmjs.com/package/@beamwind/typescript-plugin)
+[![Github](https://flat.badgen.net/badge/icon/kenoxa%2Fbeamwind?icon=github&label)](https://github.com/kenoxa/beamwind/blob/main/packages/typescript-plugin)
+
+> [Read the docs](https://beamwind.js.org) |
+> [Change Log](https://github.com/kenoxa/beamwind/blob/main/packages/typescript-plugin/CHANGELOG.md)
+
+---
+
+<!-- prettier-ignore-start -->
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
+
+- [Installation](#installation)
+- [Usage](#usage)
+- [Contribute](#contribute)
+- [License](#license)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+<!-- prettier-ignore-end -->
+
+## Features
+
+Provides editor support for ```tw`...```` tagged template syntax including:
+
+- Autocomplete for tailwind, beamwind and oceanwin classes
+- Warnings on unknown classes
+- Quick fixes for misspelled property names.
+
+
+## Installation
+
+```sh
+npm install --save-dev @beamwind/typescript-plugin
+```
+
+## Usage
+
+> Please refer to the [main documentation](https://beamwind.js.org#usage) for further information.
+
+This plugin requires TypeScript 2.4 or later. It can provide intellisense in both JavaScript and TypeScript files within any editor that uses TypeScript to power their language features. This includes [VS Code](https://code.visualstudio.com), [Sublime with the TypeScript plugin](https://github.com/Microsoft/TypeScript-Sublime-Plugin), [Atom with the TypeScript plugin](https://atom.io/packages/atom-typescript), [Visual Studio](https://www.visualstudio.com), and others. 
+
+### With VS Code
+
+Just install the [VS Code Beamwind extension](https://github.com/kenoxa/beamwind/packages/vscode). This extension adds syntax highlighting and IntelliSense for styled components in JavaScript and TypeScript files.
+
+If you are using a [workspace version of TypeScript]((https://code.visualstudio.com/Docs/languages/typescript#_using-newer-typescript-versions)) however, you must manually install the plugin along side the version of TypeScript in your workspace.
+
+Then add a `plugins` section to your [`tsconfig.json`](http://www.typescriptlang.org/docs/handbook/tsconfig-json.html) or [`jsconfig.json`](https://code.visualstudio.com/Docs/languages/javascript#_javascript-project-jsconfigjson)
+
+```json
+{
+  "compilerOptions": {
+    "plugins": [
+      {
+        "name": "@beamwind/typescript-plugin"
+      }
+    ]
+  }
+}
+```
+
+Finally, run the `Select TypeScript version` command in VS Code to switch to use the workspace version of TypeScript for VS Code's JavaScript and TypeScript language support. You can find more information about managing typescript versions [in the VS Code documentation](https://code.visualstudio.com/Docs/languages/typescript#_using-newer-typescript-versions).
+
+### With Sublime
+
+This plugin works with the [Sublime TypeScript plugin](https://github.com/Microsoft/TypeScript-Sublime-Plugin).
+
+And configure Sublime to use the workspace version of TypeScript by [setting the `typescript_tsdk`](https://github.com/Microsoft/TypeScript-Sublime-Plugin#note-using-different-versions-of-typescript) setting in Sublime:
+
+```json
+{
+  "typescript_tsdk": "/path/to/the/project/node_modules/typescript/lib"
+}
+```
+
+Finally add a `plugins` section to your [`tsconfig.json`](http://www.typescriptlang.org/docs/handbook/tsconfig-json.html) or [`jsconfig.json`](https://code.visualstudio.com/Docs/languages/javascript#_javascript-project-jsconfigjson) and restart Sublime.
+
+```json
+{
+  "compilerOptions": {
+    "plugins": [
+      {
+        "name": "@beamwind/typescript-plugin"
+      }
+    ]
+  }
+}
+```
+
+### With Atom
+
+This plugin works with the [Atom TypeScript plugin](https://atom.io/packages/atom-typescript).
+
+
+Then add a `plugins` section to your [`tsconfig.json`](http://www.typescriptlang.org/docs/handbook/tsconfig-json.html) or [`jsconfig.json`](https://code.visualstudio.com/Docs/languages/javascript#_javascript-project-jsconfigjson) and restart Atom.
+
+```json
+{
+  "compilerOptions": {
+    "plugins": [
+      {
+        "name": "@beamwind/typescript-plugin"
+      }
+    ]
+  }
+}
+```
+
+To get sytnax highlighting for styled strings in Atom, consider installing the [language-babel](https://atom.io/packages/language-babel) extension.
+
+### With Visual Studio
+
+This plugin works [Visual Studio 2017](https://www.visualstudio.com) using the TypeScript 2.5+ SDK.
+
+Then add a `plugins` section to your [`tsconfig.json`](http://www.typescriptlang.org/docs/handbook/tsconfig-json.html).
+
+```json
+{
+  "compilerOptions": {
+    "plugins": [
+      {
+        "name": "@beamwind/typescript-plugin"
+      }
+    ]
+  }
+}
+```
+
+Then reload your project to make sure the plugin has been loaded properly. Note that `jsconfig.json` projects are currently not supported in VS.
+
+## Configuration
+
+### Tags
+
+This plugin adds IntelliSense to any template literal [tagged](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) with `tw`, `ow` or `bw`:
+
+```js
+import { bw } from 'beamwind'
+
+bw`
+  sm:hover:(
+    bg-black
+    text-white
+  )
+  md:(bg-white hover:text-black)
+`
+```
+
+You can enable IntelliSense for other tag names by configuring `"tags"`:
+
+```json
+{
+  "compilerOptions": {
+    "plugins": [
+      {
+        "name": "@beamwind/typescript-plugin",
+        "tags": [
+          "tw",
+          "cx"
+        ]
+      }
+    ]
+  }
+}
+```
+
+Now strings tagged with either `tw` and `cx` will have IntelliSense.
+
+## Contribute
+
+Thanks for being willing to contribute!
+
+> This project is free and open-source, so if you think this project can help you or anyone else, you may [star it on GitHub](https://github.com/kenoxa/beamwind). Feel free to [open an issue](https://github.com/kenoxa/beamwind/issues) if you have any idea, question, or you've found a bug.
+
+**Working on your first Pull Request?** You can learn how from this _free_ series [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)
+
+We are following the [Conventional Commits](https://www.conventionalcommits.org) convention.
+
+### Manual testing the Language service plugin
+
+You can check manually language service plugin features with our example project.
+
+```
+yarn build
+cd dist
+yarn link
+cd project-fixtures/react-apollo-prj
+yarn install
+yarn link @beamwind/typescript-plugin
+code . # Or launch editor/IDE what you like
+```
+
+Of course, you can use other editor which communicates with tsserver .
+
+### Sponsors
+
+[![Kenoxa GmbH](https://images.opencollective.com/kenoxa/9c25796/logo/68.png)](https://www.kenoxa.com) [Kenoxa GmbH](https://www.kenoxa.com)
+
+## License
+
+[MIT](https://github.com/kenoxa/beamwind/blob/main/LICENSE) © [Kenoxa GmbH](https://kenoxa.com)

packages/typescript-plugin/package-scripts.js

@@ -0,0 +1 @@
+module.exports = require('../../package-scripts')

packages/typescript-plugin/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@beamwind/typescript-plugin",
+  "version": "0.0.0",
+  "description": "TypeScript language service plugin that adds IntelliSense for beamwind",
+  "keywords": [
+    "TypeScript",
+    "beamwind",
+    "tailwind"
+  ],
+  "homepage": "https://github.com/kenoxa/beamwind#readme",
+  "bugs": {
+    "url": "https://github.com/kenoxa/beamwind/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kenoxa/beamwind.git",
+    "directory": "packages/typescript-plugin"
+  },
+  "license": "MIT",
+  "author": "Kenoxa GmbH <https://kenoxa.com>",
+  "source": "src/index.ts",
+  "main": "dist/node/typescript-plugin.js",
+  "browser": false,
+  "scripts": {
+    "build": "nps",
+    "prepublishOnly": "nps",
+    "test": "nps"
+  },
+  "prettier": "@carv/prettier-config",
+  "eslintConfig": {
+    "extends": "@carv/eslint-config",
+    "root": true
+  },
+  "jest": {
+    "preset": "@carv/jest-preset"
+  },
+  "dependencies": {
+    "dlv": "^1.1.3",
+    "tailwindcss": "^2.0.1",
+    "typescript-template-language-service-decorator": "^2.2.0",
+    "vscode-languageserver-types": "^3.13.0"
+
+  },
+  "devDependencies": {
+    "nps": "^5.9.12"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/typescript-plugin/src/config.ts

@@ -0,0 +1 @@
+export const pluginName = 'typescript-beamwind-plugin'

packages/typescript-plugin/src/configuration.ts

@@ -0,0 +1,41 @@
+export interface BeamwindPluginConfiguration {
+  readonly tags: ReadonlyArray<string>;
+  // readonly validate: boolean;
+  // readonly lint: { [key: string]: any };
+  // readonly emmet: { [key: string]: any };
+}
+
+export class ConfigurationManager {
+
+  private static readonly defaultConfiguration: BeamwindPluginConfiguration = {
+      tags: ['bw', 'ow'],
+      // validate: true,
+      // lint: {
+      //     emptyRules: 'ignore',
+      // },
+      // emmet: {},
+  };
+
+  private readonly _configUpdatedListeners = new Set<() => void>();
+
+  public get config(): BeamwindPluginConfiguration {
+    return this._configuration;
+  }
+
+  private _configuration: BeamwindPluginConfiguration = ConfigurationManager.defaultConfiguration;
+
+  public updateFromPluginConfig(config: BeamwindPluginConfiguration): void {
+      this._configuration = {
+          ...ConfigurationManager.defaultConfiguration,
+          ...config,
+      };
+
+      for (const listener of this._configUpdatedListeners) {
+          listener();
+      }
+  }
+
+  public onUpdatedConfig(listener: () => void): void {
+      this._configUpdatedListeners.add(listener);
+  }
+}

packages/typescript-plugin/src/index.ts

@@ -0,0 +1,9 @@
+// https://github.com/kingdaro/typescript-plugin-tw-template/blob/master/src/index.ts
+// https://github.com/microsoft/typescript-styled-plugin/blob/master/README.md
+// https://github.com/Quramy/ts-graphql-plugin/tree/master/src
+// https://github.com/tailwindlabs/tailwindcss-intellisense/tree/master/packages/tailwindcss-language-service
+
+import type * as ts from 'typescript/lib/tsserverlibrary'
+import { BeamwindPlugin } from './plugin'
+
+export = (config: { typescript: typeof ts }): BeamwindPlugin => new BeamwindPlugin(config.typescript)