Skip to content

Commit

Permalink
fix(core): swizzle --eject js should not copy theme .d.ts files (#7776)
Browse files Browse the repository at this point in the history
slorber authored Jul 14, 2022

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent c3d2e0d commit c48f338
Showing 10 changed files with 48 additions and 58 deletions.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
@@ -7,38 +7,18 @@ exports[`swizzle eject ComponentInFolder JS: ComponentInFolder/Sibling.css 1`] =
"
`;

exports[`swizzle eject ComponentInFolder JS: ComponentInFolder/Sibling.tsx 1`] = `
"import React from 'react';
export default function Sibling() {
return <div>Sibling</div>;
}
"
`;

exports[`swizzle eject ComponentInFolder JS: ComponentInFolder/index.css 1`] = `
".testClass {
background: black;
}
"
`;

exports[`swizzle eject ComponentInFolder JS: ComponentInFolder/index.tsx 1`] = `
"import React from 'react';
export default function ComponentInFolder() {
return <div>ComponentInFolder</div>;
}
"
`;

exports[`swizzle eject ComponentInFolder JS: theme dir tree 1`] = `
"theme
└── ComponentInFolder
├── Sibling.css
├── Sibling.tsx
├── index.css
└── index.tsx"
└── index.css"
`;

exports[`swizzle eject ComponentInFolder TS: ComponentInFolder/Sibling.css 1`] = `
@@ -89,15 +69,6 @@ exports[`swizzle eject ComponentInFolder/ComponentInSubFolder JS: ComponentInFol
"
`;

exports[`swizzle eject ComponentInFolder/ComponentInSubFolder JS: ComponentInFolder/ComponentInSubFolder/index.tsx 1`] = `
"import React from 'react';
export default function ComponentInSubFolder() {
return <div>ComponentInSubFolder</div>;
}
"
`;

exports[`swizzle eject ComponentInFolder/ComponentInSubFolder JS: ComponentInFolder/ComponentInSubFolder/styles.css 1`] = `
".testClass {
background: black;
@@ -117,7 +88,6 @@ exports[`swizzle eject ComponentInFolder/ComponentInSubFolder JS: theme dir tree
└── ComponentInFolder
└── ComponentInSubFolder
├── index.css
├── index.tsx
├── styles.css
└── styles.module.css"
`;
@@ -169,20 +139,10 @@ exports[`swizzle eject ComponentInFolder/Sibling JS: ComponentInFolder/Sibling.c
"
`;

exports[`swizzle eject ComponentInFolder/Sibling JS: ComponentInFolder/Sibling.tsx 1`] = `
"import React from 'react';
export default function Sibling() {
return <div>Sibling</div>;
}
"
`;

exports[`swizzle eject ComponentInFolder/Sibling JS: theme dir tree 1`] = `
"theme
└── ComponentInFolder
├── Sibling.css
└── Sibling.tsx"
└── Sibling.css"
`;

exports[`swizzle eject ComponentInFolder/Sibling TS: ComponentInFolder/Sibling.css 1`] = `
@@ -215,19 +175,9 @@ exports[`swizzle eject FirstLevelComponent JS: FirstLevelComponent.css 1`] = `
"
`;

exports[`swizzle eject FirstLevelComponent JS: FirstLevelComponent.tsx 1`] = `
"import React from 'react';
export default function FirstLevelComponent() {
return <div>First level component</div>;
}
"
`;

exports[`swizzle eject FirstLevelComponent JS: theme dir tree 1`] = `
"theme
├── FirstLevelComponent.css
└── FirstLevelComponent.tsx"
└── FirstLevelComponent.css"
`;

exports[`swizzle eject FirstLevelComponent TS: FirstLevelComponent.css 1`] = `
Original file line number Diff line number Diff line change
@@ -24,13 +24,18 @@ function stableCreatedFiles(
}

describe('eject', () => {
async function testEject(action: SwizzleAction, componentName: string) {
async function testEject(
action: SwizzleAction,
componentName: string,
{typescript}: {typescript: boolean} = {typescript: true},
) {
const siteDir = await createTempSiteDir();
const siteThemePath = path.join(siteDir, 'src/theme');
const result = await eject({
siteDir,
componentName,
themePath: ThemePath,
typescript,
});
return {
siteDir,
@@ -53,6 +58,22 @@ describe('eject', () => {
`);
});

it(`eject ${Components.JsComponent} JS`, async () => {
const result = await testEject('eject', Components.JsComponent, {
typescript: false,
});
expect(result.createdFiles).toEqual([
'JsComponent/index.css',
'JsComponent/index.js',
]);
expect(result.tree).toMatchInlineSnapshot(`
"theme
└── JsComponent
├── index.css
└── index.js"
`);
});

it(`eject ${Components.ComponentInSubFolder}`, async () => {
const result = await testEject('eject', Components.ComponentInSubFolder);
expect(result.createdFiles).toEqual([
Original file line number Diff line number Diff line change
@@ -19,6 +19,7 @@ describe('readComponentNames', () => {
Components.ComponentInSubFolder,
Components.Sibling,
Components.FirstLevelComponent,
Components.JsComponent,
Components.NoIndexComp1,
Components.NoIndexComp2,
Components.NoIndexSubComp,
@@ -69,6 +70,7 @@ describe('getThemeComponents', () => {
Components.ComponentInSubFolder,
Components.Sibling,
Components.FirstLevelComponent,
Components.JsComponent,
Components.NoIndex,
Components.NoIndexComp1,
Components.NoIndexComp2,
Original file line number Diff line number Diff line change
@@ -16,6 +16,7 @@ export const Components = {
Sibling: 'ComponentInFolder/Sibling',
ComponentInFolder: 'ComponentInFolder',
FirstLevelComponent: 'FirstLevelComponent',
JsComponent: 'JsComponent',
NoIndex: 'NoIndex',
NoIndexComp1: 'NoIndex/NoIndexComp1',
NoIndexComp2: 'NoIndex/NoIndexComp2',
10 changes: 8 additions & 2 deletions packages/docusaurus/src/commands/swizzle/actions.ts
Original file line number Diff line number Diff line change
@@ -33,6 +33,7 @@ export type ActionParams = {
siteDir: string;
themePath: string;
componentName: string;
typescript: boolean;
};

export type ActionResult = {
@@ -49,6 +50,7 @@ export async function eject({
siteDir,
themePath,
componentName,
typescript,
}: ActionParams): Promise<ActionResult> {
const fromPath = path.join(themePath, componentName);
const isDirectory = await isDir(fromPath);
@@ -60,7 +62,12 @@ export async function eject({
const globPatternPosix = posixPath(globPattern);

const filesToCopy = await Globby(globPatternPosix, {
ignore: ['**/*.{story,stories,test,tests}.{js,jsx,ts,tsx}'],
ignore: _.compact([
'**/*.{story,stories,test,tests}.{js,jsx,ts,tsx}',
// When ejecting JS components, we want to avoid emitting TS files
// In particular the .d.ts files that theme build output contains
typescript ? null : '**/*.{d.ts,ts,tsx}',
]),
});

if (filesToCopy.length === 0) {
@@ -103,7 +110,6 @@ export async function wrap({
typescript,
importType = 'original',
}: ActionParams & {
typescript: boolean;
importType?: 'original' | 'init';
}): Promise<ActionResult> {
const isDirectory = await isDir(path.join(themePath, themeComponentName));
1 change: 1 addition & 0 deletions packages/docusaurus/src/commands/swizzle/index.ts
Original file line number Diff line number Diff line change
@@ -145,6 +145,7 @@ Created wrapper of name=${componentName} from name=${themeName} in path=${result
siteDir,
themePath,
componentName,
typescript,
});
logger.success`
Ejected name=${componentName} from name=${themeName} to path=${result.createdFiles}
4 changes: 2 additions & 2 deletions website/_dogfooding/testSwizzleThemeClassic.mjs
Original file line number Diff line number Diff line change
@@ -30,7 +30,7 @@ const classicThemePathBase = path.join(
'../../packages/docusaurus-theme-classic',
);

const themePath = swizzleConfig
const themePath = typescript
? path.join(classicThemePathBase, 'src/theme')
: path.join(classicThemePathBase, 'lib/theme');

@@ -98,13 +98,13 @@ for (const componentName of componentNames) {
siteDir: toPath,
themePath,
componentName,
typescript,
};
switch (action) {
case 'wrap':
return wrap({
...baseParams,
importType: 'init', // For these tests, "theme-original" imports are causing an expected infinite loop
typescript,
});
case 'eject':
return eject(baseParams);

0 comments on commit c48f338

Please sign in to comment.