8 examples of 'ng generate component in folder' in JavaScript

72
private async createComponent(componentName: string) {
73
    // copy component folder to app/components/
74
    let sourcePath = join(__filename, '..', '..', 'dist', 'component', '*');
75
    let destinationPath = resolve(join('.', 'app', 'components', componentName));
76
77
    // create destination path
78
    mkdirSync(destinationPath, {
79
        recursive: true,
80
    });
81
82
    // copy files to path
83
    const copyCommand = `cp -r ${sourcePath} ${destinationPath}`;
84
    await exec(copyCommand, (err) => {
85
        if (err) {
86
            console.log(chalk.red(err.message));
87
            process.exit(1);
88
        }
89
    });
90
}

3
function generateIndexContent(basePath, componentNames) {
4
  let result = '';
5
  for (const name of componentNames) {
6
    const url = path.join(basePath, name);
7
    result += `export { default as ${name} } from './${url}';\n`;
8
  }
9
10
  // metadata.json
11
  result += `export { default as metadata } from './metadata';`;
12
  return result;
13
}

118
generateComponentList() {
119
  var components = {};
120
  var componentFinder = new ComponentFinder();
121
  // TODO Multiple component source directory.
122
  var sourceDirectory = path.join(this._frameworkConfig.absoluteProjectDir, 'src');
123
  componentFinder.find(sourceDirectory, (thumbRelativePath, testRelativePath, docRelativePath, code, componentJson) => {
124
    if (!components.hasOwnProperty(componentJson.vendor)) {
125
      components[componentJson.vendor] = {};
126
    }
127
    if (components[componentJson.vendor].hasOwnProperty(componentJson.name)) {
128
      console.log('Duplicate component, will be overwritten: ' + componentJson.vendor + '.' + componentJson.name);
129
    }
130
131
    thumbRelativePath = this._prepWithSrc(thumbRelativePath);
132
    testRelativePath = this._prepWithSrc(testRelativePath);
133
    docRelativePath = this._prepWithSrc(docRelativePath);
134
    components[componentJson.vendor][componentJson.name] = {
135
      thumbnail: thumbRelativePath,
136
      test: testRelativePath,
137
      doc: docRelativePath,
138
      detail: componentJson,
139
      code: code
140
    };
141
  });
142
  return components;
143
}

69
function scaffoldComponent() {
70
  const componentTemplate = `
71
  <div>
72
    <p>${componentName} Component</p>
73
    
74
  </div>
75
76
77
78
`;
79
80
  const outputDirectoryPath = componentRootPath;
81
  const outputFilePath = path.join(outputDirectoryPath, `${componentName}.vue`);
82
83
  if (fs.existsSync(outputFilePath)) {
84
    throw `Component path ${outputFilePath} already exists. Not creating component.`;
85
  }
86
87
  fs.writeFileSync(outputFilePath, componentTemplate, 'utf8');
88
89
  return outputFilePath;
90
}

74
async function createComponent({ componentName, packageDir }) {
75
  if (!componentName) {
76
    throw new Error(
77
      'Missing component name argument, use: `yarn run create-package:components [package-name] [ComponentName]`'
78
    )
79
  }
80
81
  if (!initialIsCapital(componentName)) {
82
    throw new Error(
83
      `Wrong format for '${componentName}': use CamelCase for ComponentName`
84
    )
85
  }
86
87
  await fs.writeFile(
88
    path.join(packageDir, 'src', `${componentName}.js`),
89
    componentTemplate({ componentName })
90
  )
91
}

10
module.exports = function generate(component: string, options = {}) {
11
  options = getConfig(options)
12
13
  const fileName = caseTransform(component, options.fileFormat)
14
  const componentName = caseTransform(component, options.componentFormat)
15
  const componentPath = io.getComponentPath(
16
    componentName,
17
    options.directory,
18
    fileName
19
  )
20
21
  const files = templates(options.typeCheck || "")({
22
    fileName,
23
    componentName,
24
    componentPath,
25
    noTest: !options.test,
26
    isFunctional: options.isFunctional,
27
    semiColon: options.semi ? ";" : "",
28
    cssExtension: options.cssExtension.replace(/^\./, ""),
29
  })
30
31
  for (const file of files) {
32
    io.writeToDisk(file.filePath, file.content)
33
  }
34
35
  return { componentName, componentPath, files }
36
}

68
private generateComponent(ast: SketchMSLayer) {
69
    return `
70
import React, { Component } from 'react';
71
import './XLayers.css';
72
73
class XLayers extends Component {
74
  render() {
75
    return (
76
      <div>
77
        ${this.sharedCodegen.generateComponentTemplate(ast, Template.JSX)}
78
      </div>
79
    );
80
  }
81
}
82
83
export default XLayers;
84
    `;
85
  }

20
function createDemoFile(component: Component, componentDemoRootPath, demoName, fileName, vueContent) {
21
  const name = demoName.substring(0, 1).toUpperCase() + demoName.substring(1);
22
  const content = renderTemplate('src/templates/demo-index.vue.tmpl', {
23
    name, demoName, dir: component.dir, fileName
24
  });
25
  const componentGeneratedFilePath = 'src/generated/' + component.dir;
26
  if (!fs.existsSync(componentGeneratedFilePath)) {
27
    fs.mkdirSync(componentGeneratedFilePath);
28
  }
29
  const demoDir = `src/packages/${component.name}/demo`;
30
  if (!fs.existsSync(demoDir)) {
31
    fs.mkdirSync(demoDir);
32
  }
33
  fs.writeFileSync(`${componentGeneratedFilePath}/${demoName}.txt`, vueContent);
34
  fs.writeFileSync(`${componentGeneratedFilePath}/${demoName}.vue`, content);
35
}