TypeScript Compiler API で Storybook を置換した話とその次の話
TECH STAND #6 TypeScript https://standfm.connpass.com/event/229027/ note PDFy https://note-pdfy.panda-program.com/ 「TypeScript Compiler API で40の Storybook コンポーネントを storiesOf から CSF（Component Story Format）に置換した」 https://devblog.thebase.in/entry/typescript-compiler-api-storybook レポジトリ https://github.com/baseinc/panda-storybook-v5-to-v6 storiesof-to-csf https://github.com/storybookjs/storybook/blob/m
Jake Donham > Technical Difficulties > Reconstructing TypeScript, part 0 Reconstructing TypeScript, part 0: intro and background2021-09-07I've been building a "document development environment" called Programmable Matter that supports live code embedded in documents, with a simple TypeScript-like programming language. It's been fun figuring out how to implement it—the type system in TypeScript is
大規模 Closure Tools プロジェクトに Prettier を導入するまでの道のり - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロントエンドエキスパートチームの鈴木(@__sosukesuzuki)です。 弊社のサービスである kintone では、コードのフォーマットを ESLint のみで行っているためプロジェクト内でコーディングスタイルを統一しきれていないという問題を抱えていました。 そこで opinionated なコードフォーマッター Prettier を導入し、コードベース全体でコーディングスタイルを統一するための支援をフロントエンドエキスパートチームで行いました。 2011 年にローンチされた kintone では、フロントエンドの大部分が Closure Tools を使って開発されています。Closure Tools は型の指定方法やクラスの定義方法などに独自システムを採用しており、現在の JavaScript のエコシステムや仕様と一部乖離しています。そのため、Prettier 本
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
新しい構文がやってくる ご存知の通り、JavaScript の標準仕様である ECMAScript では毎年新しい記法や構文が提案され、採択されています。もちろん JavaScript のスーパーセットである TypeScript もその例外ではありません。 TypeScript では基本的に ECMAScript Proposal の Stage3 になった仕様から順次サポートするという方針があります。最近であれば v5.0 に入った Decorators や v5.2 で導入される using Declarations(Explicit Resource Management)などが該当します。 ここまでのことは普段 TypeScript を利用している方であれば知っている方も多いでしょう。しかし実際に TypeScript で新しい構文がサポートされた後、typescript-esl
module bundler を作った
このフロントエンドの魔境に生まれたからには一度は俺が考えた最強の module bundler を作りたい。みんなそう思ってると思う。作った。 mizchi/bundler: hobby bundler tldr このコードが // foo.js export default 1; // index.js import foo from "./foo.js"; console.log(foo); export const index = 1; こうなる // @mizchi/bundler generate const _$_exported = {}; const _$_import = (id) => _$_exported[id] || _$_modules[id]((_$_exported[id] = {})); const _$_modules = { "/foo.js": (_
Transcript Extends Developer Experience Yosuke Kurami (@Quramy) About me - Yosuke KuramiʢGitHub, Twitter: @Quramyʣ - Web frontend developer - 5͘Β͍TypeScriptͬͯ·͢ None TypeScript APIΛͬͨ πʔϧ࡞Γָ͍ͧ͠ Today’s goal - TypeScriptΛͬͨπʔϧͰշద͞ΛखʹೖΕΑ͏ʂ - ͦΜͳ͜ͱͰ͖Δͷʁͱ͍͏ؾ͖ʹͳͬͯ͘ΕΔͱخ͍͠ - TypeScript APIͰԿ͔࡞Ζ͏ʂͱ͍͏ਓ͕૿͑ͯཉ͍͠ TypeScript and DX What’s DX ? - ͦͦDeveloper ExperienceͬͯͳΜͩΖ͏ - ͱͱUser ExperienceʹΠϯεύΠ
Dive into AST
Dive into AST
GitHub - ast-grep/ast-grep: ⚡A CLI tool for code structural search, lint and rewriting. Written in Rust
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
大規模なコードベース向けの高速なASTツールとしてast-grepというものがある。これについての調査メモ。 主に以下の公式ドキュメントを読み進めて、利用方法、パターンやルールの詳細などについて理解を深める。 ast-grepとは 公式ドキュメントでは、コードの検索からLint、codemodに至るまでASTツールとして網羅的にカバーできるツールであることが以下のように表現されている。 Think ast-grep as an hybrid of grep, eslint and codemod. 結果に精度が求められる場面では、高速であるものの精密さに欠けるテキストベースではなく、ASTベースでの正確な解析の方が望ましいだろうけど、ASTでの記述は非常に面倒になりがちという側面がある。 その点においてast-grepは、テキストベースでのgrepではなく、ASTベースでのgrepというよ
OPA/Regoによる汎用的なGo言語の静的解析
TL; DR Go言語は様々な静的解析ツールがあるが、独自ルールのチェックなどをするには都度ツールを自作する必要がある 1つのツールでより汎用的なチェックができるように、汎用ポリシー言語のRegoでGo言語のAST（抽象構文木）を検査できるようにした 「第一引数に必ずcontext.Contextをとる」というルールをCIでチェックした様子 背景 Go言語では様々な静的解析ツールが提供されており、一般的なベストプラクティスが正しく記述されているか？については既存の静的解析ツールを利用することで概ね必要なチェックをすることができます。例えばセキュアなGoのコーディングをするためのツールとして gosec などがあり、自分も愛用させてもらっています。しかし、ソフトウェア開発におけるコーディング上のルールはベストプラクティスによるものだけでなく、そのソフトウェアやチームに依存したルールというのも
TL;DR: JavaScriptで使われるネイティブパーサーは、言語間の余分な作業のために常に速いとは限りません。これらのオーバーヘッドを回避し、マルチコアを使うことが性能にとって重要です。 Rustは、そのパフォーマンスと安全性の特徴から、JavaScriptエコシステムの中で急速に選択肢の一つになっています。しかし、RustをJavaScriptツールに統合することは、特に効率的で移植性の高いプラグインシステムを設計する際に、固有の課題をもたらします。 「JavaScriptツールをRustで書き直すことは、広範な外部貢献を必要としない速度重視のプロジェクトにとって有利です。」 ESLintの作者であるNicholas C. Zakas Rustは、その急な学習曲線のために難しいものになりがちで、さらにコンパイルされたバイナリを異なるプラットフォームに配布することも簡単ではありません
GitHub - zesterer/chumsky: Write expressive, high-performance parsers with ease.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
TypeScript Compiler APIを活用してi18nの不整合をチェックする - Commune Engineer Blog
こんにちは。業務委託としてコミューンのグローバルチームでエンジニアをしているhiro08と申します。 グローバルチームでは主に海外展開に向けた開発や施策を行なっています。もし、グローバルチームに興味のある方は日本のSaaSスタートアップが世界で戦うためのプロダクトを開発するということも一読ください。 今回はグローバルチームでの開発の一部として、TypeScript Compiler APIを活用したi18nの不整合をチェックするツールを作成したお話をしようと思います。 背景 海外展開に向けた開発でまず思いつくのがi18n (多言語化) 対応ではないでしょうか。コミューンのプロダクトではi18nの対応が完了しており、すでに運用フェーズに入っています。 しかし、運用していく中で対訳データのキーやネームスペースの不整合に気づく仕組みがないことが課題点として挙がってきました。 i18nでは、ネーム
The video included in the slides can be accessed here https://web.archive.org/web/20230328125908/https://rome.tools/blog/2022/11/08/rome-10/
GitHub - buntis/buntis: A 100% compliant, self-hosted typescript parser that emits an ESTree-compatible AST
Dismiss Join GitHub today GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. Sign up A 100% compliant, self-hosted typescript parser that emits an ESTree-compatible AST https://buntis.github.io/buntis/
マークダウンパーサを作ろう - エムスリーテックブログ
デジカル開発メンバーの末永(@asmsuechan)です。電子カルテの開発を通して医師や医療事務の方の「書く」をサポートしています。 みなさん、マークダウンでテキストを書いていますか？私はマークダウンで書くことが好きで、プレーンテキストでもほとんどのメモをマークダウン記法で書いてしまいます。この記事もはてなのマークダウンを使って書いています。*1 マークダウンを使えるサービスを挙げていくとGitHubやStackOverflowなど開発者ならば誰しも知るサービスが多く出てきます。このことからもわかるように、マークダウンはもはや開発者とは縁の切れないものとなっています。 しかし、普段の開発時によく使うマークダウンですが、実際にはどのような仕組みで動いているのかを知る人は少ないのではないかと思います。 この記事ではオリジナルのマークダウンパーサ「minute」をTypeScriptを使ってハン
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
GitHub - oxc-project/oxc: ⚓ A collection of JavaScript tools written in Rust.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
はじめましてこんにちは、はるさめです。本誌は名目上 Vivliostyle について紹介する同人誌なのですが、またしても空気を読まず Vivliostyle ではない OSS プロジェクト「Remark」について紹介したいと思います。 Remark Remark とは「Markdown processor」という紹介文の通り、Remark で書かれたテキストを読み込み様々な変換を施すことができる JavaScript 製のライブラリです。Remark は様々なライブラリと組み合わせて目的の形式のテキストに変換でき、Rehype と一緒に使うことで Markdown を HTML に変換できます。同様の処理をしてくれるライブラリとしては Marked.js が有名ですが、Remark の強力な機能は、Markdown を 抽象構文木（AST）に変換することで、より柔軟に構文を改造できる点です
Prettier Plugins
フロントエンド 年越し LT忘年会 2019でPrettier PluginsについてLTをしました。 イベントページ( https://kfug.connpass.com/event/153648/ ) Prettier Pluginsを使って何ができるか、ASTについて話しました。 Prettier PluginsによりJavaやRuby、PHP、Kotlin、Elmなどの言語へのPrettierの実行が可能になります。また、JavaScript / TypeScriptなどPrettier本体がサポートしている言語に関しても機能拡張できます。
GitHub - oxc-project/javascript-parser-in-rust: Tutorial on writing a JavaScript Parser in Rust
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
About meNode.js, React, React Native 言語の中身読んだり AST 解析で遊ぶのが好き
GitHub - wooorm/markdown-rs: CommonMark compliant markdown parser in Rust with ASTs and extensions
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - dsherret/ts-morph: TypeScript Compiler API wrapper for static analysis and programmatic code changes.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
GitHub - spencertipping/caterwaul: A Javascript-to-Javascript compiler
Caterwaul is two different things. First, and most importantly, it is a powerful low-level Javascript code manipulation library with a Javascript parser, AST, in-process compiler, and replication. Second, it is a programming language implementation that uses this library to transform your code in various arcane ways that I happen to find useful. The whole project is MIT-licensed, and in the unlike
We all know that parsing is an important part of designing and implementing programming languages, but it’s the equivalent of Brussels sprouts: good for the diet, but a taste that only a select few enjoy. Unfortunately, I’ve come to realise that our general distaste for parsing is problematic. While many of us think that we’ve absorbed the advances of the 1960s into our collective understanding, I
By Francesco Bertolaccini You’ve reached computer programming nirvana. Your journey has led you down many paths, including believing that God wrote the universe in LISP, but now the truth is clear in your mind: every problem can be solved by writing one more compiler. It’s true. Even our soon-to-be artificially intelligent overlords are nothing but compilers, just as the legends foretold. That sma
ast-grep | structural search/rewrite tool for many languages
AST-GREPFind Code by Syntax ast-grep(sg) is a fast and polyglot tool for code structural search, lint, rewriting at large scale. Search and Rewriteast-grep is a code tool for structural search and replace. It is like syntax-aware grep/sed! You can write code patterns to locate and modify code, based on AST, in thousands of files, interactively. sg -p '$A && $A()' -r '$A?.()' Scan as Linterast-grep
JavaScript Cold startsThe performance of applications on the web platform is becoming increasingly bottlenecked by the startup (load) time. Large amounts of JavaScript code are required to create rich web experiences that we’ve become used to. When we look at the total size of JavaScript requested on mobile devices from HTTPArchive, we see that an average page loads 350KB of JavaScript, while 10%
ソースコードを AST（抽象構文木）と呼ばれるデータ構造に変換することで、ソースコードの検証や変換をプログラムによって行えるようになる。 例えば ESLint では、ソースコードを AST に変換して、それに対してチェックを行っている。 また、V8 などの JavaScript エンジンも、対象の JavaScript ソースコードを AST に変換してから、後続の処理を行う。 AST を使えるようになると、ソースコードの検証や変換を行うツールを自作できるようになる。 この記事では、JavaScript AST を扱うための方法を見ていく。 この記事で使用しているライブラリのバージョンは以下の通り。 esprima@4.0.1 estraverse@5.2.0 escodegen@2.0.0 動作環境は Node.js のv12.17.0で行っている。 また、この記事に出てくる木構造の画像
はじめに 以前、jscodeshitという JavaScriptおよびTypeScriptコードのリファクタリングツールの紹介記事を書きました。 JavaScriptのリファクタリングツール「jscodeshift」の使い方 このツールは、ASTベースでコードを自在に変換でき、とても便利です。jscodeshiftは、Transform File（変換処理を記述するファイル）として変換処理を書くのですが、これまでJavaScriptで変換処理を書くことが多かったです。 しかし、Transform FileはTypeScriptで書くことが可能です。 最近、TypeScriptで変換処理を書いた際、その開発体験がとても良かったので紹介します。ASTベースのコーディングにTypeScriptの型推論や補完があると、開発が快適になることは想像しやすいでしょう。 この記事で出てくるコードやファイル
Goの型から静的解析でTypeScriptを生成したい
export type Param = { action: string; created_at: string; status: "Failure" | "OK"; version: number; } というinterfaceを生成してくれるライブラリです。jsonタグを見ます。 つまるところ、OpenAPIやgRPCを利用すればGoとTypeScriptで共通の型を利用できますが、それをもっと手軽にGoの型からTypeScriptのinterfaceを生成できたら便利そうだな、というのが開発した理由です。 類似のライブラリはあったのですが型解析のために一度コンパイルし、reflectを利用した型解析をしており一時ファイルを生成していました。そのためあまり使い勝手が良くなく、また実行に時間がかかるなどの問題があったため独自で作ることにしました。 Goの静的解析 Goでは静的解析ツールを
GitHub - BlueBlazin/thislang: A subset of javascript implemented in that subset of javascript. Yes, it can run itself.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Doctrine ORMでValue Objectを扱う方法4選 #phpstudy / 4 ways to handle Value Objects with Doctrine ORM
はじめにこんにちは、TIG コアテクノロジーユニットの平岡です。 コアテクノロジーユニットはフューチャーグループ全体のビジネスを支えるコアとなる技術をグループ横断で提供することをミッションにしています。またOSS活動も活発に行っています。コアテクノロジーユニットのメンバーが以前に投稿した記事をいくつか紹介しておきますので、是非そちらもご覧ください。 RedmineからGoogle Hangouts Chat へ連携するプラグインを作成しました！ その問い合わせ、AIが解決します！～Redmineチケットレコメンドシステムのご紹介～ SQL開発者を幸せにする！？ Sublime Text 3でも使える uroboroSQL Formatter を公開しました ANTLRとは皆さんはANTLRをご存知でしょうか？ANTLRとはparser(構文解析器)を生成するためのツール(パーサジェネレータ
GitHub - kataw/kataw: An 100% spec compliant ES2022 JavaScript toolchain
An insane fast Javascript toolchain. WIP Kataw is a JavaScript toolchain that aim to unify functionality that has previously been separate tools. It features everything from low-level CST manipulation to tools like linting, code analyzes, transform, and minification. CST nodes CST keywords ESNext Diagnostics Diagnostic arguments Printing Ignore comment Linting Transformation Types Comments CST par
This article was discussed on Hacker News. This is a continuation of my last post on how to write a tree-sitter grammar in an afternoon. Building on the grammar we wrote, now we’re going to write a linter for Imp, and it’s even easier! The final result clocks in less than 60 SLOC and can be found here. Recall that tree-sitter is an incremental parser generator. That is, you give it a description o
Series: Intermediate Babel JavaScriptbabelASTtransform Overview Fork the babel Crash Course on Parsing Code to AST Our custom babel parser A new token: '@@' The new parser How parsing works this.eat, this.match, this.next Our babel plugin 1. Assume `currying` has been declared in the global scope. 2. Use the `@babel/helpers` Closing Note Editor's Note Further Reading Following my previous post on
ESTree という JavaScript の AST の仕様がある。ESTree っぽいものを出力してくれるパーサーをまとめていく。 雑にまとめているので興味ある人とか詳しい人は適当に追記してもらって構いません。 @babel/parser Babel で使われているパーサー。最新の JavaScript だけでなく、まだ ECMAScript に入っていないプロポーザルや TypeScript、Flow もオプションで対応している。また、AST は ESTree と一部互換性がないものを出力するが、estree プラグインを使うことで、ESTree 互換の AST を出力させることもできる。 Prettier のデフォルトパーサー。@babel/eslint-parserを使うことで ESLint のパーサーとしても使うことができる。 @typescript-eslint/typesc
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reconstructing TypeScript, part 0: intro and background
sqlglot/posts/sql_diff.md at main · tobymao/sqlglot
typescript-eslintで新しい構文をサポートする
Extends Developer Experience
大規模コードベース向けASTツールのast-grepについて
TypeScriptパーサーのベンチマーク：Rustツールの性能の謎を解く
Deep dive into Biome in JSConf 2023
Let’s try to hack AST of JavaScript
Remark で広げる Markdown の世界
外部ライブラリもインストール・型解釈できるTypeScript playgroundを作った
Laurence Tratt: Which Parsing Approach?
The life and times of an Abstract Syntax Tree
Faster script loading with BinaryAST?
AST で JavaScript のコードを変換する - 30歳からのプログラミング
jscodeshift with TypeScript - Qiita
インターン成果発表資料 / サイボウズ・フロントエンドエキスパートコース
ANTLRを業務で活用した話 | フューチャー技術ブログ
How to write a linter using tree-sitter in an hour
Creating custom JavaScript syntax with Babel | Tan Li Hau
ESTree 互換っぽい AST を出力する JavaScript のパーサーまとめ