initial commit

.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  root: true,
+  // This tells ESLint to load the config from the package `eslint-config-custom`
+  extends: ["custom"],
+  settings: {},
+};

.gitignore

@@ -0,0 +1,33 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+.pnp
+.pnp.js
+
+# testing
+coverage
+
+# next.js
+.next/
+out/
+build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# turbo
+.turbo

README.md

@@ -0,0 +1 @@
+# wattanx converter

apps/web/.gitignore

@@ -0,0 +1,8 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+dist

apps/web/README.md

@@ -0,0 +1,42 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# yarn
+yarn install
+
+# npm
+npm install
+
+# pnpm
+pnpm install --shamefully-hoist
+```
+
+## Development Server
+
+Start the development server on http://localhost:3000
+
+```bash
+npm run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+npm run build
+```
+
+Locally preview production build:
+
+```bash
+npm run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

apps/web/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <NuxtPage />
+  </div>
+</template>

apps/web/assets/css/main.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/web/assets/template/options-api.txt

@@ -0,0 +1,23 @@
+export default {
+  name: 'MixinSample',
+  props: {
+    dirty: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      firstName: 'first',
+      lastName: 'last',
+    };
+  },
+  computed: {
+    fullName() {
+      return this.firstName + this.lastName;
+    },
+    isDirty() {
+      return this.dirty;
+    }
+  },
+};

apps/web/components/ConvertView.vue

@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import { ref, watch } from "vue";
+import prettier from "prettier";
+import parserTypeScript from "prettier/parser-typescript";
+import hljs from "highlight.js/lib/core";
+import typescript from "highlight.js/lib/languages/typescript";
+import "highlight.js/styles/atom-one-dark.css";
+import { convertSrc } from "@wattanx/vue-mixins-converter";
+// @ts-ignore
+import optionsApi from "~/assets/template/options-api.txt?raw";
+
+hljs.registerLanguage("typescript", typescript);
+
+const outputType = new Map([
+  ["vue2", "Vue 2 / Composition API"],
+  ["nuxt2", "Nuxt 2.x / Composition API"],
+]);
+
+const outputTypeKeys = [...outputType.keys()];
+
+const input = ref(optionsApi);
+const functionName = ref("useMixinSample");
+const output = ref("");
+const selectedOutputType = ref(outputTypeKeys[0]);
+const hasError = ref(false);
+
+watch(
+  [input, selectedOutputType, functionName],
+  () => {
+    const useNuxt = selectedOutputType.value === "nuxt2";
+    try {
+      hasError.value = false;
+      const outputText = convertSrc({
+        input: input.value,
+        fileName: functionName.value,
+        useNuxt,
+      });
+      const prettifiedHtml = hljs.highlightAuto(
+        prettier.format(outputText, {
+          parser: "typescript",
+          plugins: [parserTypeScript],
+        })
+      ).value;
+      output.value = prettifiedHtml;
+    } catch (err) {
+      hasError.value = true;
+      console.error(err);
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <div class="flex h-full flex-row">
+    <div class="flex flex-1 flex-col">
+      <div class="flex flex-row space-x-4 py-4">
+        <h2>Input: Vue2 Mixins</h2>
+        <div>
+          <label for="function-name">functionName: </label>
+          <input
+            id="function-name"
+            class="border-1 border-borderColor focus:outline-focused rounded-md border-solid px-2 outline outline-2 outline-transparent"
+            type="text"
+            v-model="functionName"
+          />
+        </div>
+      </div>
+      <textarea
+        class="text-md w-full flex-1 border p-2 leading-5"
+        :class="{ hasError }"
+        v-model="input"
+      ></textarea>
+    </div>
+    <div class="flex flex-1 flex-col">
+      <div class="flex flex-row py-4">
+        <label for="output-type" class="mr-2">Output: </label>
+        <select
+          id="output-type"
+          v-model="selectedOutputType"
+          class="border-1 border-borderColor focus:outline-focused rounded-md border-solid outline outline-2 outline-transparent"
+        >
+          <option v-for="key in outputTypeKeys" :key="key" :value="key">
+            {{ outputType.get(key) }}
+          </option>
+        </select>
+      </div>
+
+      <pre
+        class="hljs text-md w-full flex-1 select-all whitespace-pre-wrap border p-2 leading-5"
+        v-html="output"
+      ></pre>
+    </div>
+  </div>
+</template>

apps/web/nuxt.config.ts

@@ -0,0 +1,10 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  css: ["~/assets/css/main.css"],
+  postcss: {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    },
+  },
+});

apps/web/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "web",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "build": "nuxt generate",
+    "dev": "nuxt dev",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "highlight.js": "^11.5.1"
+  },
+  "devDependencies": {
+    "@types/highlight.js": "^10.1.0",
+    "@types/prettier": "^2.7.2",
+    "@wattanx/vue-mixins-converter": "*",
+    "autoprefixer": "^10.4.13",
+    "nuxt": "3.0.0",
+    "postcss": "^8.4.20",
+    "prettier": "^2.8.1",
+    "tailwindcss": "^3.2.4",
+    "ts-morph": "^17.0.1",
+    "typescript": "^4.9.4"
+  }
+}

apps/web/pages/vue-mixins-converter.vue

@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import ConvertView from "~/components/ConvertView.vue";
+</script>
+
+<template>
+  <div class="h-screen w-screen p-4">
+    <ConvertView />
+  </div>
+</template>

apps/web/tailwind.config.js

@@ -0,0 +1,23 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./components/**/*.{js,vue,ts}",
+    "./layouts/**/*.vue",
+    "./pages/**/*.vue",
+    "./plugins/**/*.{js,ts}",
+    "./nuxt.config.{js,ts}",
+    "./app.vue",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        focused: "#63b3ed",
+        borderColor: "#E2E8F0",
+      },
+      borderWidth: {
+        1: "1px",
+      },
+    },
+  },
+  plugins: [],
+};

apps/web/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "wattanx-converter",
+  "version": "0.0.0",
+  "private": true,
+  "workspaces": [
+    "apps/*",
+    "packages/*"
+  ],
+  "scripts": {
+    "build": "turbo run build",
+    "dev": "turbo run dev --parallel",
+    "lint": "turbo run lint",
+    "format": "prettier --write \"**/*.{ts,tsx,md}\""
+  },
+  "devDependencies": {
+    "eslint-config-custom": "*",
+    "prettier": "latest",
+    "turbo": "latest"
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "dependencies": {},
+  "packageManager": "[email protected]"
+}

packages/eslint-config-custom/index.js

@@ -0,0 +1,7 @@
+module.exports = {
+  extends: ["next", "turbo", "prettier"],
+  rules: {
+    "@next/next/no-html-link-for-pages": "off",
+    "react/jsx-key": "off",
+  },
+};

packages/eslint-config-custom/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "eslint-config-custom",
+  "version": "0.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "eslint": "^7.23.0",
+    "eslint-config-next": "13.0.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-react": "7.31.8",
+    "eslint-config-turbo": "latest"
+  },
+  "devDependencies": {
+    "typescript": "^4.7.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/tsconfig/README.md

@@ -0,0 +1,3 @@
+# `tsconfig`
+
+These are base shared `tsconfig.json`s from which all other `tsconfig.json`'s inherit from.

packages/tsconfig/base.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Default",
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "composite": false,
+    "declaration": true,
+    "declarationMap": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "inlineSources": false,
+    "isolatedModules": true,
+    "moduleResolution": "node",
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "preserveWatchOutput": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "jsx": "preserve"
+  },
+  "exclude": ["node_modules"]
+}

packages/tsconfig/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "tsconfig",
+  "files": [
+    "base.json"
+  ]
+}

packages/vue-mixins-converter/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

packages/vue-mixins-converter/.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "semi": true
+}