syndicate-js/packages/ts-plugin

TypeScript plugin for Syndicate

Rewrites Syndicate DSL syntax into plain TypeScript as a tsserver plugin, allowing your IDE to work directly with Syndicate constructs and not requiring a separate preprocessing step.

Sadly, tsc doesn't pay attention to plugins (not as of April 2021, anyway). If you're using tsc as part of your build, you will need to use @syndicate-lang/tsc's syndicate-tsc command instead.

Installing the plugin

package.json:

{
  "devDependencies": {
    "@syndicate-lang/ts-plugin": "file:../..",
    ...
  },
  ...
}

then yarn install.

Enabling the plugin in the TypeScript compiler

tsconfig.json:

{
  "compilerOptions": {
    "plugins": [
      { "name": "@syndicate-lang/ts-plugin" }
    ],
    ...
  },
  ...
}

Getting it to work with specific editors

Emacs with Tide

It should Just Work, if the node_modules next to tsconfig.json has a typescript/ subdirectory.

If no such typescript/ subdirectory exists in node_modules, then because tsserver loads plugins from relative to tsserver.js rather than tsconfig.json, you will have to tell tide-mode about where your project's tsserver lives.

One easy way to do that is to create a symlink in your node_modules:

ln -s /FULL/PATH/TO/YOUR/PROJECT/node_modules/typescript ./node_modules/

Another way to do it is to put a .dir-locals.el file in your project root, containing

((tide-mode
  . ((tide-tsserver-executable
      . "/FULL/PATH/TO/YOUR/PROJECT/node_modules/typescript/bin/tsserver"))))

I don't know of any way of automatically resolving a relative path specification with respect to the directory containing .dir-locals.el without using eval, but if you're happy to do so, you can use the following:

((typescript-mode
  . ((eval . (setq tide-tsserver-executable
                   (concat
                    (let ((d (dir-locals-find-file ".")))
                      (if (stringp d) d (car d)))
                    "node_modules/typescript/lib/tsserver.js"))))))

If you use the .dir-locals.el methods, you may need to run tide-restart-server once after opening the first TypeScript file in your project (and then close and re-open that TypeScript file).

Visual Studio Code

After yarn install, if you have a node_modules/typescript directory, then the following will work. (Otherwise, there may not be an option to select "Use Workspace Version", and you may need to symlink a typescript directory into node_modules as described for Emacs Tide above.)

Open VS Code, and select the version of TypeScript contained therein by following instructions here.

Specifically, when selecting a TypeScript version, choose "Use Workspace Version".

For me, the net effect of this is to create a .vscode/settings.json file containing:

{
    "typescript.tsdk": "node_modules/typescript/lib"
}

Debugging

You can get verbose logs from Tide's tsserver by setting the Emacs variable tide-tsserver-process-environment:

(setq tide-tsserver-process-environment '("TSS_LOG=-file /tmp/tss.log"))

You can also enable "verbose" output, if that's useful:

(setq tide-tsserver-process-environment '("TSS_LOG=-level verbose -file /tmp/tss.log"))

Finally, you can set these options in a .dir-locals.el file, too:

((typescript-mode
  . ((tide-tsserver-process-environment . ("TSS_LOG=-level verbose -file /tmp/tss.log")))))