legacy-paperclip

legacy-paperclip copied to clipboard

it's not guaranteed that third-party modules will share the same config as the host project, so we'll need to emit these modules in a place where the host project has access to - maybe a tmp directory in the third-party directory?

.paperclip would be a good option for this. Though, need to be cognizant about published modules that may not go through the build step.

.paperclip/modules in the host directory would be an okay option, I think. Maybe we can be explicit about this? modulesOutDir might be an option. We could emit modules to lib/$$paperclip-modules as well

What about third-party code attached to these modules?

The best approach for this I think is to match the compiled host paths to the compiled paths of third-party modules. This would work by following the module's target + emitted file configuration. For example, a module's config that looks like this:

{
  compilerOptions: [
    { target: "react", emit: ["js"], outDir: "lib" },
    { target: "react": emit: [".d.ts"] }
  ],
  srcDir: "src"
}

And a host module that looks like this:

<import src="@module/src/component.pc" />

component.pc would resolve to @module/lib/component.pc.js assuming that JS is emitted. Same goes for other targets as well. For example:

{
  compilerOptions: [
    { target: "react", emit: ["js"], outDir: "lib" },
    { target: "php": emit: ["php"], outDir: "php-lib" }
  ],
  srcDir: "src"
}

Could be resolved as @modules/components/lib/component.pc.js and @modules/components/php-lib/component.pc.php respectively.

This would would need to go into the interim compiler, and the interim compiler will need to know what constitutes as a third-party module - this would be coming from the modulesDir prop.

Another consideration with this is nested third-party modules. I don't think this is problematic since PC files would be recursively resolved.

⚠️ Another consideration here is environment-specific config options. For example, this would need to work with third-party modules:

{
  "srcDir": "./src",
  "moduleDirs": ["node_modules"],
  "compilerOptions": {
    "target": "react",

    // Only emit these files
    "emit": ["js", "d.ts", "css"],

    // compile files to this directory
    "outDir": "./lib",

    // Emit all assets (png, svg, css) to this directory
    "assetOutDir": "./lib/assets"

    // combine all CSS into this file
    "mainCSSFileName": "main.css",

    // do not embed any assets
    "embedAssetMaxSize": -1,
    "assetPrefix": "https://my-cdn.com",    
    "useAssetHashNames": true,
  },
  
  "lintOptions": {
    "noUnusedStyles": true,
    "enforceVars": [
      "font-family",
      "color"
    ]
  }
}

Where assetPrefix is used for all compiled assets. My immediate sense here is that this requires third-party modules to be emitted to a compiled host directory. This however leaves non-PC code to live in the modules directory. Also, what about bundlers?