ast-grepでReact 19に移行する
はじめに こんにちは、ast-grepの作者ヘリントンです。 Reactバージョン19のリリースに伴い、新機能と改善が追加されました。 しかし、この新バージョンへのアップグレードには、ソースコードの一部を修正する必要があります。特に大規模なコードベースでは、このプロセスはかなり手間がかかり、繰り返し行う必要があります。 本記事では、ast-grepというツールの使用方法を説明します。このツールは、コードベース内でパターンを見つけて置き換えることを目的として設計されており、React 19への移行を容易にします。 以下の3つの主要なcodemodsに焦点を当てます。 <Context>をプロバイダとして使用する 暗黙のrefコールバックリターンを削除する refをpropsとして使用し、forwardRefを削除する 前提条件: ast-grepのセットアップ まず、ast-grepをセット
ast-grep VSCode: 構造検索と置換の強力なツール
こんにちは、 ast-grepの作者Herringtonです。 正規表現でコードを検索したことがある方なら、複数行のマッチングや入れ子構造の処理、コメントの無視などに苦労したことがあるかもしれません。 そこで、ast-grep VSCodeという新しい拡張を紹介します。これは、構造的検索と置換（SSR）という技術を利用して、より正確で効率的な検索と置換を実現するツールです。 構造検索は？ テキスト検索と置換の限界 例えば、JavaScriptコードをリファクタリングして、lodash の _.filter 関数をネイティブの Array.prototype.filter メソッド に置き換えたいとします。単純なテキスト検索と置換は次のようになります: これは一部のケースではうまくいくかもしれませんが、いくつかの問題があります。 一行の式しかマッチングできません。コードが複数行にまたがってい
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
Rust製TypeScriptコンパイラstcの現状と今後 | メルカリエンジニアリング
この記事は、Merpay Tech Openness Month 2023 の2日目の記事です。 メルペイFrontendエンジニアの@togami2864です。普段はPartner Platformというチームで加盟店申込みフォームや審査・管理を行うためのMerchant Supportツールの開発・運用を担当しています。 本記事ではRust製TypeScriptコンパイラであるstcについて筆者の観測範囲での概要、開発状況、課題等を紹介します。なお、内容は全て2023年5月時点のものです。また、本記事の一部は Node学園 41時限目 書籍について で発表したものと重複していることをご了承ください。 概要 stcは2022年10月にオープンソース化されたRust製のTypeScriptコンパイラです。 https://github.com/dudykr/stc 製作者はRust製のトラ
【脱ランタイムCSS in JS】styled-componentsを別のCSS in JSに自動置換するCLIツールの開発
1.はじめに 本記事はサイボウズの夏インターン(2022年)で取り組んだ内容の紹介を行います。インターンでは、サイボウズのフロントエンド領域における横断的組織であるフロントエンドエキスパートチームに配属されました。5日間のインターン期間でstyled-componentsを別のCSS in JSに自動置換するCLIツール・extract-styledの開発に取り組みました。 2. extract-styledの紹介 実装したextract-styledは、以下のようなCLI経由の実行を通して、styled-componentsで定義されたReactコンポーネントをtargetに指定した任意のCSS in JSに変換することができます。(現時点では変換先としてlinaria・vanilla-extractに対応) $ extract-styled \\ --path ./src/compon
Remark で広げる Markdown の世界
はじめましてこんにちは、はるさめです。本誌は名目上 Vivliostyle について紹介する同人誌なのですが、またしても空気を読まず Vivliostyle ではない OSS プロジェクト「Remark」について紹介したいと思います。 Remark Remark とは「Markdown processor」という紹介文の通り、Remark で書かれたテキストを読み込み様々な変換を施すことができる JavaScript 製のライブラリです。Remark は様々なライブラリと組み合わせて目的の形式のテキストに変換でき、Rehype と一緒に使うことで Markdown を HTML に変換できます。同様の処理をしてくれるライブラリとしては Marked.js が有名ですが、Remark の強力な機能は、Markdown を 抽象構文木（AST）に変換することで、より柔軟に構文を改造できる点です
unified
Content as structured dataWe compile content to syntax trees and syntax trees to content. We also provide hundreds of packages to work on the trees in between. You can build on the unified collective to make all kinds of interesting things. BuildWe provide the building blocks: from tiny, focussed, modular utilities to plugins that combine them to perform bigger tasks. And much, much more. You can
新言語『TypoScript』を作った - Qiita
この記事は、クソアプリAdvent Calendar2021の20日目(ホノルル時間)の記事であると同時に、GMOペパボエンジニア Advent Calendar 2021の21日目(日本時間)の記事でもあります。 みなさん、TypeScript使ってますか？TypeScriptはJavaScriptの世界に秩序をもたらす素晴らしい言語ですね。 しかし世界には光の秩序だけでなく闇の混沌も必要です。 という訳で、JavaScriptに闇の混沌をもたらす新言語を作ってみました。 その名も『TypoScript』です。 TypoScript is 何 TypoScriptとは何か。まずはこちらのコードをご覧ください。 function fizz_buzz(count) { for (var i = 1; i <= caunt; i++) { if (i % 3 === 0 && i % 5 ==
Content EditableでWYSIWYGエディタ作るの楽しい！ - maru source
こんにちは丸山@h13i32maruです。 僕は今、Ubie Discoveryで医療従事者向けのカルテエディタを作っています。人生で初めてContent Editableを使ってエディタを作ってるんですが、それがすごく楽しいです！というのも、エディタを作るには色々技術的な課題があります。例えば、テキストをパースするには？ASTからHTMLをビルドするには？パフォーマンスのよい更新方法は？などなど。それらの技術的な課題を解決していくのが単純に楽しいという感じです。また、車輪の再発明は極力抑えつつ、自分たちのプロダクトでやりたいことを実現できるような工夫もしています。 というわけで、今回はそんなエディタ作りで取り組んだ課題と解決策を紹介していきたいと思います。 （訳: 楽しかったので、誰かに聞いてもらいたい！） エディタの概要 メンテしやすいテキストパーサ - PEG.js メンテしやすいH
技術的負債の返済の足がかりにテンプレートのParserを作った話 - LIFULL Creators Blog
プロダクトエンジニアリング部の中島です。 今回はフロントエンドのテンプレート部分についての負債やレガシーな機構に対する改善の取り組みについて紹介させていただきます。 背景 LIFULL社のメインサービスであるLIFULL HOME'SのメインリポジトリのサーバサイドはSymfony + Twig(※テンプレートエンジン)の構成を採用しています。 このリポジトリの歴史は古く、2011年頃から開発は行われており、今となってはレガシーな機構であったり、開発体験を損ねる負債的な記述も多くあります。 テンプレート部分で多くみられる問題のうちいくつかをピックアップすると弊社ではこのようなものが悩みのタネになっています 変数などを用いた動的な部分テンプレートの呼び出しによるgrepしやすさの低下 部分テンプレートをロードするときにスコープ制御(Twigだとonly属性)をつけ忘れてテンプレート間依存関係
大統一 Node ツールチェイン Rome の野望 現状の実装
つい先日 beta リリースされたフロントエンドのツールチェインの Rome について、その思想とコードを読んだ結果の現状について。 Rome Frontend Toolchain この記事は公式ドキュメント以外にもソースを読んで得られた undocumented な部分も含んでいるので、すぐ古くなる。その前提で読むように。 問題の認識とその解決手段 フロントエンドの最適化は実行前のプリプロセスに、エコシステムの開発リソースの多くが当てられている。Node のツールチェインが発達するにつれて、自前の パーサ+AST 定義を持つ実装が増えていった歴史がある。 acorn(estree) babel prettier typescript terser それぞれのツールの生成する AST はそのツールの都合で微妙に/もしくは大幅に定義がずれている。typescript に至っては完全に別物。こ
コードとビジュアルの双方向編集なエディタを試作して ビジュアルプログラミングについて考えてみた
ノーコードは形を変えた現代の RPG ツクールなのではないか - mizdev の記事では、ノーコードのビジュアルプログラミングが発展性を欠く理由として、次の理由を挙げました。 汎用的なビジュアルプログラミング基盤(Scratch みたいなものではなくプロユースなもの) ↑ 上でのビジュアル環境でのデータベースのグラフ構造のビジュアル化手法 ↑ 上でのビジュアル環境でのパイプラインのビジュアル化手法 ↑ 上での UI とデータと UI のマッピングのビジュアル化手法 これらを隠蔽してオートスケールするマネージレスなインフラ基盤(これはパイプライン実装の中身) で、こんなものを作った話 現代の Intellisense + Formatter 感覚 TypeScript の補完と、保存の度に prettier をバリバリに効かせた状態でプログラミングをしていると、そもそも自由文脈でコードを書
JavaScript ASTを使ったツール(自作、ESLint、Babel、jscodeshift)を実装する話
JavaScript ASTを使ったツール(自作、ESLint、Babel、jscodeshift)を実装する話 Dive into ASTというJavaScriptのASTを使ったツールの作り方を見ていく話を書きました。 自作の正規表現、ASTチェックツール、ESLint、Babel、jscodeshiftでそれぞれ動くツールを実装してるので、リポジトリにまとめてあります。 スライドではCode Surferを使ってASTや書き方をインタラクティブに解説しています。 スライド: Dive into AST リポジトリ: azu/dive-into-ast: JavaScriptを中心にしたAST(Abstract Syntax Tree)を使ったツールの作り方についての資料です！ 自作ASTツール、ESLint、Babel、jscodeshift それぞれでASTを使ったツールをどう実装
これからの時代のメタプログラミングJavaScriptの正義を語ろう - Qiita
JavaScript Advent Calendar 2017 - Qiitaの第一日目です。JavaScriptにおいてメタプログラミングを用いて、エンジニアリングにおける邪悪と闘うという趣旨の記事です。 秋のJavaScript祭 in mixi 2017 - Javascript祭りでこれからのメタプログラミングJavaScriptの正義を語ろうという発表をしてきました。この記事はそれをベースにしています。 技術書典3で頒布した簡単JavaScript AST入門という同人誌ですが、どうも電子版を求める声が多いので、簡単JavaScript AST入門 - 東京ラビットハウス - BOOTH で電子版を販売しています。 結論から メタプログラミングを活用すればこの三つを達成できます。 コーディングタイムコンパイルという新しい概念・技術 暖かみ溢れる手作業を根絶 生産性を向上して、相対
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - ast-grep/ast-grep: ⚡A CLI tool for code structural search, lint and rewriting. Written in Rust
GitHub - orgapp/orgajs: parse org-mode content into AST
Generate React Component with TypeScript AST
GitHub - peggyjs/peggy: Peggy: Parser generator for JavaScript
Extends Developer Experience
JavaScript AST入門 - NextPublishing - BOOTH