New
Codemod Registry
Explore community-led codemods to migrate, optimize, and transform your codebase.
+600 codemods published
Ready to contribute?
Build your own codemod and share it with the community.
Explore community-led codemods to migrate, optimize, and transform your codebase.
Build your own codemod and share it with the community.
Explore community-led codemods to migrate, optimize, and transform your codebase.
This codemod updates the ```renderElement``` function to include TypeScript typings and adds a default case for rendering unsupported element types. ### Before (v0.88) ```ts const renderElement = props => { const { element, children, attributes } = props; switch (element.type) { case 'paragraph': return <p {...attributes}>{children}</p>; } }; ``` ### After (v0.104) ```ts import { RenderElementProps } from 'slate-react'; const renderElement = ({ element, children, attributes }: RenderElementProps) => { switch (element.type) { case 'paragraph': return <p {...attributes}>{children}</p>; default: return <div {...attributes}>{children}</div>; } }; ```
This codemod transforms ```Editor.node``` usage into ```Editor.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. ### Before (v0.88) - Editor.node usage ```ts const [node, path] = Editor.node(editor, at); ``` ### After (v0.104) - Editor.nodes usage ```ts const [nodeEntry] = Editor.nodes(editor, { at, match: n => true, }); const [node, path] = nodeEntry; ```
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 ```ts const schema = { blocks: { paragraph: { isVoid: false, }, }, }; ``` ### After ```ts const isValidNode = (node: Node) => { if (Element.isElement(node) && node.type === 'paragraph') { return node.children.every(child => Text.isText(child)); } return true; }; ```
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. ## Code Changes ### Version 0.88 ```typescript const selection = editor.selection; const start = Range.start(selection); ``` ### Version 0.104 ```typescript const selection = editor.selection as Range | null; if (selection) { const start = Range.start(selection); // Selection is now safely typed and null-checked } ``` ## Key Changes - Added explicit type casting to `Range | null` - Implemented null safety check using conditional block - Ensures selection exists before accessing its properties ## Migration Benefits - Prevents runtime errors from null selections - Provides better TypeScript type safety - Follows current best practices for Slate selection handling
This codemod automates the update of your `onChange` event handler function to support the new `Descendant[]` type and selection handling introduced in version 0.104. **Before (v0.88):** ```typescript const onChange = value => { setValue(value); }; ``` **After (v0.104)** ```typescript const onChange = (newValue: Descendant[]) => { setValue(newValue); // Additional state management if needed const selection = editor.selection; if (selection) { // Handle selection changes } }; ```
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. ### Before (v0.88) ```ts Transforms.insertNodes(editor, newNode); ``` ### After (v0.104) ```ts Transforms.insertNodes(editor, newNode, { at: editor.selection ?? undefined, select: true, }); ```
# Codemod Slate: `withReact(createEditor())` to `useMemo` Transformation This codemod transforms the usage of `withReact(createEditor())` into a `useMemo`-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. **Before (v0.88):** ```typescript const editor = withReact(createEditor()); ``` **After (v0.104):** ```typescript const editor = useMemo(() => { const e = withReact(createEditor()); e.isInline = element => { return element.type === 'inline-element' ? true : false; }; return e; }, []); ```
This codemod migrates from using `useContext(EditorContext)` to the new `useSlate()` hook in Slate. It transforms the editor state management approach and adds new state hooks. ### Before ```ts const MyComponent = () => { const editor = useContext(EditorContext); // ... }; ``` ### After ```ts const MyComponent = () => { const editor = useSlate(); // Access editor state using new hooks const selected = useSelected(); const focused = useFocused(); // ... }; ```
# ```Editor.hasPath``` Migration Guide 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. ## Code Changes ### Before (v0.88) ```ts if (Editor.hasPath) { } ``` ### After (v0.104) ```ts if (Editor.hasPath(editor, path)) { } ``` ## Key Changes - Changed from property access (`Editor.hasPath`) to function call (`Editor.hasPath(editor, path)`) - Now requires two parameters: editor instance and path to check - Provides more explicit path validation - Improved type safety with TypeScript ## Migration Steps 1. Identify all instances of `Editor.hasPath` property access 2. Replace with `Editor.hasPath(editor, path)` function calls 3. Ensure editor instance is available in scope 4. Update path parameters to match your document structure ## Benefits - More explicit API design - Better type safety and error checking - Consistent with other Slate.js v0.104 APIs - Improved code readability and maintenance
## Transform ```Editor.hasBlock``` to ```Editor.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. ### // Before (v0.88) - ```Editor.hasBlock``` usage ```ts if (Editor.hasBlock(editor, 'paragraph')) { // do something } ``` ### After (v0.104) - Alternative approach using ```Editor.nodes``` ```ts if (Editor.nodes(editor, { match: n => Element.isElement(n) && n.type === 'paragraph' }).next().done === false) { // do something } ```
Build your own codemod and share it with the community.