Fix modular add from custom template (#2190)

* Enhanced `modular add` from template logging

* Add to Templates documentation

* Fix adding from template not adding all files when "files" filter in package.json is not specified

* Added template tests

* Force addPackage to require.resolve from the modular root

* Refactor addPackage tests to not run yarn and use a separate temp testing space

* Refactor createModularTestContext to make it more  generic

* Reduce test template app to skeleton

* Use npm-packlist instead of globby for addPackage

* Prevent infinite loop in verifyPackageTree

.changeset/clean-jeans-retire.md

@@ -0,0 +1,11 @@
+---
+'modular-scripts': patch
+---
+
+Fixed `modular add` from template not copying all template files when no "files"
+field is specified in the package.json - now using npm-packlist for this
+Added tests for adding from templates
+Refactored addPackage tests to use a temp directory outside the repository and
+improve performance by avoiding yarn commands in favour of mocking the behaviour
+Added more descriptive log messages when running `modular add` with a local
+template

__fixtures__/templates/modular-template-app/CHANGELOG.md

@@ -0,0 +1 @@
+# Test File

__fixtures__/templates/modular-template-app/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "modular-template-app",
+  "version": "1.1.0",
+  "exports": {
+    "./package.json": "./package.json"
+  },
+  "modular": {
+    "type": "template",
+    "templateType": "app"
+  },
+  "license": "Apache-2.0",
+  "files": [
+    "src"
+  ]
+}

__fixtures__/templates/modular-template-app/src/App.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import logo from './logo.svg';
+import './App.css';
+
+function App(): JSX.Element {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          Edit <code>src/App.tsx</code> and save to reload.
+        </p>
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+      </header>
+    </div>
+  );
+}
+
+export default App;

__fixtures__/templates/modular-template-app/src/__tests__/App.test.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from '../App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

__fixtures__/templates/modular-template-filter/CHANGELOG.md

@@ -0,0 +1 @@
+# Test File

__fixtures__/templates/modular-template-filter/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "modular-template-filter",
+  "version": "0.0.1",
+  "exports": {
+    "./package.json": "./package.json"
+  },
+  "modular": {
+    "type": "template",
+    "templateType": "app"
+  },
+  "files": [
+    "src"
+  ],
+  "license": "Apache-2.0"
+}

__fixtures__/templates/modular-template-filter/src/__tests__/filter.test.ts

@@ -0,0 +1,5 @@
+import add from '../index';
+
+test('it should add two numbers', () => {
+  expect(add(1, 2)).toEqual(3);
+});

__fixtures__/templates/modular-template-filter/src/index.tsx

@@ -0,0 +1,3 @@
+export default function add(a: number, b: number): number {
+  return a + b;
+}

__fixtures__/templates/modular-template-no-filter/CHANGELOG.md

@@ -0,0 +1 @@
+# Test File

__fixtures__/templates/modular-template-no-filter/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "modular-template-no-filter",
+  "version": "0.0.1",
+  "exports": {
+    "./package.json": "./package.json"
+  },
+  "modular": {
+    "type": "template",
+    "templateType": "app"
+  },
+  "license": "Apache-2.0"
+}

__fixtures__/templates/modular-template-no-filter/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

__fixtures__/templates/modular-template-no-filter/src/__tests__/no-filter.test.ts

@@ -0,0 +1,5 @@
+import add from '../index';
+
+test('it should add two numbers', () => {
+  expect(add(1, 2)).toEqual(3);
+});

__fixtures__/templates/modular-template-no-filter/src/index.tsx

@@ -0,0 +1,3 @@
+export default function add(a: number, b: number): number {
+  return a + b;
+}

docs/concepts/templates.md

@@ -13,6 +13,11 @@ either used implicitly (every modular `type` has a default template) or provided
 explicitly to `modular add`, either interactively or via the `--template`
 option.
 
+Templates can either be defined and used locally within your workspace, or
+published to the NPM registry to be shared with the community. When using
+`modular add` and specifying a custom template, modular will first search your
+workspace for the template before checking the registry.
+
 # Examples
 
 ```bash
@@ -55,6 +60,9 @@ selection at the interactive prompt), will search for a package whose name
 equals to the provided template option in the current workspace packages. If
 such a package is not found, Modular will try to install it with Yarn.
 
+It's important to make sure all dependencies required by the template are in the
+template's package.json when publishing it to the registry.
+
 ## How to find community templates
 
 By convention, community templates published to the NPM registry have their name

packages/modular-scripts/package.json

@@ -24,13 +24,15 @@
   "dependencies": {
     "@babel/code-frame": "7.18.6",
     "@modular-scripts/workspace-resolver": "1.2.0",
+    "@npmcli/arborist": "^6.1.0",
     "@rollup/plugin-babel": "5.3.1",
     "@rollup/plugin-commonjs": "22.0.0",
     "@rollup/plugin-json": "4.1.0",
     "@rollup/plugin-node-resolve": "13.3.0",
     "@svgr/core": "6.2.1",
     "@svgr/webpack": "6.2.1",
     "@types/micromatch": "4.0.2",
+    "@types/npmcli__arborist": "^5.6.0",
     "@types/yarnpkg__lockfile": "^1.1.5",
     "@yarnpkg/lockfile": "^1.1.0",
     "address": "1.2.1",
@@ -82,7 +84,7 @@
     "mime": "^3.0.0",
     "mini-css-extract-plugin": "2.6.1",
     "minimatch": "^5.1.0",
-    "npm-packlist": "5.1.3",
+    "npm-packlist": "^3.0.0",
     "open": "8.3.0",
     "parse5": "6.0.1",
     "pkg-up": "3.1.0",