@pinegrow/next-plugin

Pinegrow Next.js integration for source-DOM mapping.

This first package slice is intentionally webpack-first. Use it with Next dev mode on the webpack bundler path.

const { withPinegrow } = require("@pinegrow/next-plugin");

const nextConfig = {
    // existing Next config
};

module.exports = withPinegrow(nextConfig, {
    startupPage: "./app/page.js",
    dirs: {
        src: "./app",
        pages: "./app",
    },
});

For Next 16 projects, run the dev server with webpack while this package is in its first source-DOM mapping phase:

next dev --webpack

The plugin adds a webpack loader for JSX-bearing Next source files (.js, .jsx, .mjs, and .tsx). It marks intrinsic DOM elements with Pinegrow source-DOM attributes and injects a small client runtime that scans those markers into window.pinegrow.elCache.

When the dev connector starts, the plugin also announces experimental Vue Designer hints for the retained Next source-DOM path:

• experimental.sourceFrameworks: ["next"]
• experimental.designableFileTypes: [".js", ".jsx", ".mjs", ".tsx"]
• experimental.disabledFeatures: ["runtimeComponentTree", "vueSfcHotUpdate"]

Those hints let Vue Designer treat JSX-bearing files as Next source-marker files instead of routing them through Vue SFC descriptor parsing.