Migration from PostHTML Modules/Include/Extends plugins

[thewebartisan7]

PostHTML Include

PostHTML Include plugin can work when passed via options.plugins like below example:

require("posthtml-component")({
      root: "./src",
      folders: ["components", "layouts"],
      plugins: [
        require("posthtml-include")({
          encoding: "utf8",
          root: "./src"
        }),
      ]
    }),

PostHTML Modules

At the moment doesn't work when nested inside PostHTML Components plugin since it use tree.match and even trying with something like PostHTML Include is doing here https://github.com/posthtml/posthtml-include/blob/master/lib/index.js#L16 doesn't work. But a workaround is to use PostHTML Components custom tag and attributes like below:

    require("posthtml-component")({
      root: "./src",
      folders: ["components", "layouts"],
      tag: 'module',
      attribute: 'href',
      yield: 'content'
      plugins: [
        require("posthtml-include")({
          encoding: "utf8",
          root: "./src/www/posthtml-templates/"
        }),
      ]
    }),

NOTE: If you change <yield> tag to <content> to support your existing code, then you need to use it always. Maybe you can just replace all <content> with <yield> and it should works fine.

PostHTML Extends

Not yet tested.

Whole plugins array

This is my current array of plugins passed to PostHTML. The PostHTML Component plugin works in my case only when loaded after PostHTML Extends/Modules/Include.

[
    require("posthtml-extend")({
      encoding: "utf8",
      root: "./src",
      strict: false
    }),

    require("posthtml-include")({
      encoding: "utf8",
      root: "./src"
    }),

    require("posthtml-modules")({
      encoding: "utf8",
      root: "./src",
      tag: "component",
      attribute: "path",
      attributeAsLocals: true
    }),

    require("posthtml-expressions")({
      removeScriptLocals: true, 
      strictMode: false
    }),

    require("posthtml-component")({
      root: "./src/www/posthtml-templates",
      folders: ["components", "layouts", "partials", "docs/components", "docs/layouts", "docs/partials"],
      tag: 'component', // For posthtml-modules
      attribute: 'path', // For posthtml-modules
      plugins: [
        require("posthtml-include")({
          encoding: "utf8",
          root: "./src"
        }),
      ]
    }),
   
   // ... others here...
  ],