Use case
Framework
Owner
Import Change Js To Ts Extensions
This codemod changes
.js
to.ts
file extension in relative, top-level imports. If no.js
file extension was previously used, it adds.ts
file extension instead.Import Add Js Extensions
This codemod adds
.js
file extension to relative, top-level imports.Event Handling On Change
This codemod automates the update of your
onChange
event handler function to support the newDescendant[]
type and selection handling introduced in version 0.104.Insert Nodes
Theis transformation ensures that calls to
Transforms.insertNodes
in the updated API remain functional and behave identically to their usage in the older API (v0.88) while adhering to the new, more explicit parameterization.Schema Validation
This transformation involves modifying how a
paragraph
block type is handled in a schema-like structure by replacing its static configuration with a runtime validation function(isValidNode)
.Before
With React Integration
This codemod transforms the usage of
withReact(createEditor())
into auseMemo
-based structure, which wraps the editor creation and introduces an inline-checking function (isInline
) for the editor instance. This transformation optimizes the creation of the editor object by memoizing it.Editor State
This codemod migrates from using
useContext(EditorContext)
to the newuseSlate()
hook in Slate. It transforms the editor state management approach and adds new state hooks.Cursor Selection Handling
This codemod shows how to migrate cursor and
selection
handling from Slate v0.88 to v0.104, including the Preventing runtime errors from null selections.Editor Node
This codemod transforms
Editor.node
usage intoEditor.nodes
format. It also handles cases with both destructuring and non-destructuring .The new API returns an iterator of nodes instead of a single node, requiring changes to existing code patterns.Editor Has Path
This guide covers the migration of
Editor.hasPath
usage from Slate.js v0.88 to v0.104. The API has changed from a property-based check to a function call pattern, requiring updates to existing code.Editor Has Block
Transform
Editor.hasBlock
toEditor.nodes
This codemod replaces occurrences of Editor.hasBlock with the equivalent Editor.nodes structure. The transformation updates the code to use a more modern API, ensuring compatibility and improved functionality.
Custom Renderers
This codemod updates the
renderElement
function to include TypeScript typings and adds a default case for rendering unsupported element types.React/Update React Imports
This codemod transforms React imports to use named imports instead of default or namespace imports. This helps reduce bundle size by allowing better tree-shaking of unused React exports.
Test
Example
This codemod turns X into Y. It also does Z. Note: this is a contrived example. Please modify it.
Analyzer
Example
This codemod turns X into Y. It also does Z. Note: this is a contrived example. Please modify it.
Rename Deno Interfaces
This codemod renames Deno typscript interface names in your codebase to their new names.
Deno Rewrite Custom Inspect
This codemod replaces occurrences of Deno.customInspect with Symbol.for("Deno.customInspect"). This change aligns with the new standard for defining custom inspection behavior in Deno, providing better interoperability with JavaScript's built-in features.
Deno Replace Window With GlobalThis
This codemod transforms instances of the
window
identifier intoglobalThis
.Deno Replace Import Assertions
This codemod helps migrate JavaScript/TypeScript files from using the deprecated import assertions syntax to the updated import attributes syntax. The change aligns with the updated proposal for import attributes and ensures compatibility with newer versions of runtimes like Deno 2 and modern browsers that have already removed support for import assertions.
Deno Remove Node:Process Import
This codemod removes redundant import process from 'node:process'; statements, as process is now globally available in Deno v2