TypeScript Fynix Plugin

A TypeScript language service plugin that enables full TypeScript support for Fynix (.fnx) single file components.

Features

• Module resolution for .fnx files
• TypeScript IntelliSense and autocomplete
• Type checking and error detection
• Go to definition and references
• Hover information
• Automatic transformation of .fnx to .tsx

Installation

npm install typescript-fynix-plugin

Usage

Add the plugin to your tsconfig.json:

{
  "compilerOptions": {
    "jsx": "react",
    "moduleResolution": "node",
    "plugins": [
      {
        "name": "typescript-fynix-plugin"
      }
    ]
  }
}

Then restart your TypeScript server or reload your IDE.

What it does

This plugin allows you to import .fnx files in TypeScript:

import MyComponent from "./components/MyComponent.fnx";

The plugin automatically:

1. Resolves .fnx file imports
2. Transforms Fynix single file components to TypeScript/TSX
3. Provides full TypeScript language features

Fynix File Format

Fynix files use a .fnx extension with this structure:

<logic setup="ts">
  import { useState } from "react"; const [count, setCount] = useState(0);
</logic>

<view>
  <div>
    <h1>Count: {count}</h1>
    <button onClick="{()" ="">setCount(count + 1)}>Increment</button>
  </div>
</view>

<style scoped>
  h1 {
    color: blue;
  }
</style>

Requirements

• TypeScript >= 4.0.0
• Node.js >= 14.0.0

License

MIT

Author

Resty Gonzales [email protected]