@angular-devkit/core#strings TypeScript Examples

The following examples show how to use @angular-devkit/core#strings. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.ts    From ng-ant-admin with MIT License 6 votes vote down vote up
export default function (_options: any): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    const sourceTemplates = url('./files'); // 使用範本
    const sourceParametrizedTemplates = apply(sourceTemplates, [
      // renameTemplateFiles(), // 去掉后缀
      applyTemplates({
        ...strings,
        ..._options, // 使用者所輸入的參數
      })
    ]);
    return mergeWith(sourceParametrizedTemplates);
  };
}
Example #2
Source File: index.ts    From open-source with MIT License 6 votes vote down vote up
function buildSelector(options: ComponentOptions, projectPrefix: string) {
   let selector = strings.dasherize(options.name);
   if (options.prefix) {
     selector = `${options.prefix}-${selector}`;
   } else if (options.prefix === undefined && projectPrefix) {
     selector = `${projectPrefix}-${selector}`;
   }

   return selector;
 }
Example #3
Source File: render-textarea.ts    From form-schematic with MIT License 6 votes vote down vote up
renderTextArea = (prop: TextareaField) => {
    return `
    <div class="col-6">
        <div class="form-group">
            <label for="${prop.key}">
                ${prop.label}
            </label>
            ${getTooltip(prop)}
            <textarea
                formControlName="${prop.key}"
                name="${prop.key}"
                class="${prop.customClass}"
                id="${strings.dasherize('input-' + prop.key)}"${
                prop.readOnly ? '\n[readonly]="true"' : ''} >${
                    prop.placeholder ? `
                placeholder="${prop.placeholder}"`: ''}
            </textarea>
        </div>
    </div>`
}
Example #4
Source File: render-input.ts    From form-schematic with MIT License 6 votes vote down vote up
renderInput = (prop: InputField) => {
    return `
        <div class="col-6">
            <div class="form-group">
                <label for="${prop.key}">
                    ${prop.label}
                </label>${getTooltip(prop)}
                <input
                    formControlName="${prop.key}"
                    name="${prop.key}"
                    type="${prop.inputType}"
                    class="${prop.customClass}"
                    id="${strings.dasherize('input-' + prop.key)}" 
                    ${prop.isRequired ? 'required': ''}${
                        prop.placeholder ? `
                    placeholder="${prop.placeholder}"`: ''}
                    ${prop.maxLength || prop.maxLength === 0 ? `
                    maxLength=${prop.maxLength}`: ''}${
                        prop.minLength || prop.minLength === 0 ? `
                    minLength=${prop.minLength}`: ''}${
                        prop.min || prop.min === 0 ? `
                        min=${prop.min}`: ''}${
                        prop.max || prop.max === 0 ? `
                        max=${prop.max}`: ''}${
                        prop.mask ? `
                        mask="${prop.mask}"`: ''}${
                        prop.readOnly ? `
                        [readonly]="true"`: ''}
                /> 
            </div>
        </div>`
}
Example #5
Source File: render-checkbox.ts    From form-schematic with MIT License 6 votes vote down vote up
renderCheckbox = (prop: CheckboxField): string => {

  return `
    <div class="col-6">
      <div class="form-group">
          <p>${prop.label}</p>${getTooltip(prop)}
          <div class="form-check">
            <label for="${prop.key}All" class="form-check-label">
              <input
                type="checkbox"
                class="${prop.customClass}"
                id="${prop.key}All"
                (click)="toggleAll${strings.classify(prop.key)}()"
                name="All"
              />
                All
              </label>
            </div>
            <div class="form-check" *ngFor="let option of ${prop.key}Controls.controls; let i=index">
              <label 
                class="form-check-label"
                for="${prop.key}{{${prop.key}Checkboxes[i].label}}"
              >
              <input 
                type="checkbox"
                class="${prop.customClass}"
                id="${prop.key}{{${prop.key}Checkboxes[i].label}}"
                [formControl]="option"
                /> 
                {{${prop.key}Checkboxes[i].label}}
              </label>
            </div>
        </div>
    </div>`
}
Example #6
Source File: index.ts    From ng-ant-admin with MIT License 6 votes vote down vote up
export default function (_options: any): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    const sourceTemplates = url('./files'); // 使用範本
    const sourceParametrizedTemplates = apply(sourceTemplates, [
      // renameTemplateFiles(), // 去掉后缀
      applyTemplates({
        ...strings,
        ..._options, // 使用者所輸入的參數
      })
    ]);
    return mergeWith(sourceParametrizedTemplates);
  };
}
Example #7
Source File: index.ts    From ng-ant-admin with MIT License 6 votes vote down vote up
export default function (_options: any): Rule {
    return (tree: Tree, _context: SchematicContext) => {
        const sourceTemplates = url('./files'); // 使用範本
        const sourceParametrizedTemplates = apply(sourceTemplates, [
            // renameTemplateFiles(), // 去掉后缀
            applyTemplates({
                ...strings,
                ..._options, // 使用者所輸入的參數
            })
        ]);
        return mergeWith(sourceParametrizedTemplates);
    };
}
Example #8
Source File: index.ts    From ng-ant-admin with MIT License 6 votes vote down vote up
function twoLevelRule(_options: any): Rule {
    return (tree: Tree, _context: SchematicContext) => {
        let source = apply(url(`./files/src/app/pages`), [move(`./src/app/pages/${_options.mName}`), applyTemplates({
            ...strings,
            ..._options, // 使用者所輸入的參數
        })]);
        return chain([
            mergeWith(source),
            schematic('b-s', {dirname: _options.mName, filename: _options.name},),
            schematic('b-m', {name: _options.name, isTwoLevel: true},),
            move(`./src/app/pages/${_options.name}`, `./src/app/pages/${_options.mName}/${_options.name}`),
            schematic('component-lazy-m', {mName: _options.mName, name: _options.name},),
        ])
    };

}
Example #9
Source File: index.ts    From ng-ant-admin with MIT License 6 votes vote down vote up
function oneLevelRule(_options: any): Rule {
    return (tree: Tree, _context: SchematicContext) => {
        const sourceTemplates = url('./files'); // 使用範本
        const sourceParametrizedTemplates = apply(sourceTemplates, [
            // renameTemplateFiles(), // 去掉后缀
            applyTemplates({
                ...strings,
                ..._options, // 使用者所輸入的參數
            })
        ]);
        return mergeWith(sourceParametrizedTemplates);
    };

}
Example #10
Source File: find-module.ts    From router with MIT License 6 votes vote down vote up
/**
 * Find the module referred by a set of options passed to the schematics.
 */
export function findModuleFromOptions(
  host: Tree,
  options: ModuleOptions
): Path | undefined {
  if (options.hasOwnProperty('skipImport') && options.skipImport) {
    return undefined;
  }

  if (!options.module) {
    const pathToCheck =
      (options.path || '') +
      (options.flat ? '' : '/' + strings.dasherize(options.name as string));

    return normalize(findModule(host, pathToCheck));
  } else {
    const modulePath = normalize('/' + options.path + '/' + options.module);
    const moduleBaseName = normalize(modulePath).split('/').pop();

    if (host.exists(modulePath)) {
      return normalize(modulePath);
    } else if (host.exists(modulePath + '.ts')) {
      return normalize(modulePath + '.ts');
    } else if (host.exists(modulePath + '.module.ts')) {
      return normalize(modulePath + '.module.ts');
    } else if (host.exists(modulePath + '/' + moduleBaseName + '.module.ts')) {
      return normalize(modulePath + '/' + moduleBaseName + '.module.ts');
    } else {
      throw new Error(`Specified module path ${modulePath} does not exist`);
    }
  }
}
Example #11
Source File: index.ts    From garment with MIT License 6 votes vote down vote up
export default function(options: PackageSchematicOptions): Rule {
  return (_tree: Tree) => {
    let { projectName } = options;

    if (!projectName) {
      throw new SchematicsException('projectName option is required.');
    }

    const { projects } = readJson(_tree, 'garment.json');

    if (!projects[projectName]) {
      throw new SchematicsException(
        `Couldn't find project ${projectName} in garment.json`
      );
    }

    const packagePath = projects[projectName].path;

    let source = apply(url('../../templates/runner/__tests__'), [
      applyTemplates(
        {
          dot: '.',
          ...strings
        },
        { interpolationStart: '___', interpolationEnd: '___' }
      ),
      move(Path.join(packagePath, '__tests__'))
    ]);

    return chain([
      mergeWith(source),
      addPackageJsonDependencies(
        `${packagePath}/package.json`,
        'utils/fixture-helper/package.json'
      )
    ]);
  };
}
Example #12
Source File: wx-transform.base.ts    From angular-miniprogram with MIT License 6 votes vote down vote up
eventListConvert = (list: string[]) => {
    const eventMap = new Map();
    list.forEach((eventName) => {
      const result = this.eventNameConvert(eventName);
      const prefix = strings.camelize(result.prefix);
      const bindEventName = `${prefix}Event`;
      if (eventMap.has(result.name)) {
        if (eventMap.get(result.name) === bindEventName) {
          return;
        } else {
          throw new Error(
            `事件名[${result.name}]解析异常,原绑定${eventMap.get(
              result.name
            )},现绑定${bindEventName}`
          );
        }
      }
      eventMap.set(result.name, bindEventName);
    });

    return Array.from(eventMap.entries())
      .map(([key, value]) => `${key}="${value}"`)
      .join(' ');
  };
Example #13
Source File: index.ts    From form-schematic with MIT License 5 votes vote down vote up
function addDeclarationsToModule(options: any) {
	return (host: Tree) => {
		const modulePath = findModuleFromOptions(host, options)!;
		let source = readIntoSourceFile(host, modulePath);

		const formPath =
			`/${options.path}/` +
			strings.dasherize(options.name) +
			'/' +
			strings.dasherize(options.name) +
			'-form.component';

		const relativePath = buildRelativePath(modulePath, formPath);

		const declarationChanges = addDeclarationToModule(
			source,
			modulePath,
			strings.classify(`${options.name}FormComponent`),
			relativePath
		);
		const declarationRecorder = host.beginUpdate(modulePath);
		for (const change of declarationChanges) {
			if (change instanceof InsertChange) {
				declarationRecorder.insertLeft(change.pos, change.toAdd);
			}
		}
		host.commitUpdate(declarationRecorder);

		if (options.export) {
			// Need to refresh the AST because we overwrote the file in the host.
			source = readIntoSourceFile(host, modulePath);

			const exportRecorder = host.beginUpdate(modulePath);
			const exportChanges = addExportToModule(
				source,
				modulePath,
				strings.classify(`${options.name}Component`),
				relativePath
			);

			for (const change of exportChanges) {
				if (change instanceof InsertChange) {
					exportRecorder.insertLeft(change.pos, change.toAdd);
				}
			}
			host.commitUpdate(exportRecorder);
		}

		if (options.entryComponent) {
			// Need to refresh the AST because we overwrote the file in the host.
			source = readIntoSourceFile(host, modulePath);

			const entryComponentRecorder = host.beginUpdate(modulePath);
			const entryComponentChanges = addEntryComponentToModule(
				source,
				modulePath,
				strings.classify(`${options.name}Component`),
				relativePath
			);

			for (const change of entryComponentChanges) {
				if (change instanceof InsertChange) {
					entryComponentRecorder.insertLeft(change.pos, change.toAdd);
				}
			}
			host.commitUpdate(entryComponentRecorder);
		}
		return host;
	};
}
Example #14
Source File: setup-component-data.service.ts    From angular-miniprogram with MIT License 5 votes vote down vote up
run(
    data: string,
    originFileName: string,
    customStyleSheetProcessor: CustomStyleSheetProcessor
  ) {
    const changedData = changeComponent(data);
    if (!changedData) {
      return data;
    }
    const useComponentPath =
      this.dataGroup.useComponentPath.get(originFileName)!;
    const componentClassName = changedData.componentName;
    const componentDirName = strings.dasherize(
      strings.camelize(componentClassName)
    );
    const libraryPath = getComponentOutputPath(
      this.entryPoint,
      componentClassName
    );
    const styleUrlList = this.dataGroup.style.get(originFileName);
    const styleContentList: string[] = [];
    styleUrlList?.forEach((item) => {
      styleContentList.push(customStyleSheetProcessor.styleMap.get(item)!);
    });
    const selfTemplateImportStr = this.dataGroup.otherMetaCollectionGroup[
      '$self'
    ]
      ? `<import src="${resolve(
          normalize('/'),
          join(
            normalize(LIBRARY_OUTPUT_ROOTDIR),
            this.entryPoint,
            'self' + this.buildPlatform.fileExtname.contentTemplate
          )
        )}"/>`
      : '';

    const insertComponentData: ExportLibraryComponentMeta = {
      id:
        strings.classify(this.entryPoint) +
        strings.classify(strings.camelize(componentDirName)),
      className: componentClassName,
      content:
        selfTemplateImportStr +
        this.dataGroup.outputContent.get(originFileName)!,
      libraryPath: libraryPath,
      useComponents: {
        ...getUseComponents(
          useComponentPath.libraryPath,
          useComponentPath.localPath,
          this.entryPoint
        ),
        ...this.addGlobalTemplateService.getSelfUseComponents(),
      },
      moduleId: this.entryPoint,
    };
    if (styleContentList.length) {
      insertComponentData.style = styleContentList.join('\n');
    }

    return `${
      changedData.content
    }\nlet ${componentClassName}_${LIBRARY_COMPONENT_METADATA_SUFFIX}=${JSON.stringify(
      insertComponentData
    )}`;
  }
Example #15
Source File: index.ts    From open-source with MIT License 5 votes vote down vote up
export default function (options: ModuleOptions): Rule {
  return async (host: Tree) => {
    const workspace = await getWorkspace(host);
    const project = workspace.projects.get(options.project as string);

    if (options.path === undefined) {
      options.path = await createDefaultPath(host, options.project as string);
    }

    if (options.module) {
      options.module = findModuleFromOptions(host, options);
    }

    if (options.prefix === undefined) {
      options.prefix = project?.prefix || '';
    }

    const parsedPath = parseName(options.path, options.name);
    options.name = parsedPath.name;
    options.path = parsedPath.path;

    const templateSource = apply(url('./files'), [
      applyTemplates({
        ...strings,
        'if-flat': (s: string) => (options.flat ? '' : s),
        ...options,
      }),
      move(parsedPath.path),
    ]);
    const moduleDasherized = strings.dasherize(options.name);
    const controlDasherized = strings.dasherize(options.controlName);
    const controlPath = `${options.path}/${
      !options.flat ? `${moduleDasherized}/` : ''
    }${options.controlPath}${options.flat ? `/${controlDasherized}` : ''}`;

    const controlOptions: ControlOptions = {
      project: options.project,
      path: controlPath,
      name: controlDasherized,
      type: options.type,
      id: options.id || 'CONTROL',
      instance: options.instance || 'Control',
      flat: options.flat,
      prefix: options.prefix,
      prefixInterface: options.prefixInterface,
      prefixClass: options.prefixClass,
    };

    return chain([
      mergeWith(templateSource),
      schematic('control', controlOptions),
      options.lintFix ? applyLintFix(options.path) : noop(),
    ]);
  };
}
Example #16
Source File: index.ts    From open-source with MIT License 5 votes vote down vote up
export default function (options: ComponentOptions): Rule {
   return async (host: Tree) => {
     const workspace = await getWorkspace(host);
     const project = workspace.projects.get(options.project as string);

     if (options.path === undefined && project) {
       options.path = buildDefaultPath(project);
     }

     if (options.prefix === undefined && project) {
       options.prefix = project.prefix || '';
     }

     options.module = findModuleFromOptions(host, options);

     const parsedPath = parseName(options.path as string, options.name);
     options.name = parsedPath.name;
     options.path = parsedPath.path;
     options.selector =
       options.selector || buildSelector(options, (project && project.prefix) || '');

     validateName(options.name);
     validateHtmlSelector(options.selector);

     const templateSource = apply(url('./files'), [
       options.skipTests ? filter((path) => !path.endsWith('.spec.ts.template')) : noop(),
       applyTemplates({
         ...strings,
         'if-flat': (s: string) => (options.flat ? '' : s),
         ...options,
       }),
       !options.type
         ? forEach(((file) => {
             return file.path.includes('..')
               ? {
                   content: file.content,
                   path: file.path.replace('..', '.'),
                 }
               : file;
           }) as FileOperator)
         : noop(),
       move(parsedPath.path),
     ]);

     return chain([
       addDeclarationToNgModule(options),
       mergeWith(templateSource),
       options.lintFix ? applyLintFix(options.path) : noop(),
     ]);
   };
 }
Example #17
Source File: library-template-scope-name.ts    From angular-miniprogram with MIT License 5 votes vote down vote up
export function libraryTemplateScopeName(library: string) {
  return strings.classify(library.replace(/[@/]/g, ''));
}
Example #18
Source File: index.ts    From open-source with MIT License 5 votes vote down vote up
function addDeclarationToNgModule(options: ComponentOptions): Rule {
   return (host: Tree) => {
     if (!options.module) {
       return host;
     }

     options.type = options.type != null ? options.type : 'Component';

     const modulePath = options.module;
     const source = readIntoSourceFile(host, modulePath);

     const componentPath =
       `/${options.path}/` +
       (options.flat ? '' : strings.dasherize(options.name) + '/') +
       strings.dasherize(options.name) +
       (options.type ? '.' : '') +
       strings.dasherize(options.type);
     const relativePath = buildRelativePath(modulePath, componentPath);
     const classifiedName = strings.classify(options.prefix!) + strings.classify(options.name) + strings.classify(options.type);
     const declarationChanges = addDeclarationToModule(
       source,
       modulePath,
       classifiedName,
       relativePath,
     );

     const declarationRecorder = host.beginUpdate(modulePath);
     for (const change of declarationChanges) {
       if (change instanceof InsertChange) {
         declarationRecorder.insertLeft(change.pos, change.toAdd);
       }
     }
     host.commitUpdate(declarationRecorder);

     if (options.export) {
       // Need to refresh the AST because we overwrote the file in the host.
       const source = readIntoSourceFile(host, modulePath);

       const exportRecorder = host.beginUpdate(modulePath);
       const exportChanges = addExportToModule(
         source,
         modulePath,
         strings.classify(options.name) + strings.classify(options.type),
         relativePath,
       );

       for (const change of exportChanges) {
         if (change instanceof InsertChange) {
           exportRecorder.insertLeft(change.pos, change.toAdd);
         }
       }
       host.commitUpdate(exportRecorder);
     }

     return host;
   };
 }
Example #19
Source File: index.ts    From garment with MIT License 5 votes vote down vote up
export default function(options: PackageSchematicOptions): Rule {
  return (tree: Tree, context: SchematicContext) => {
    const { name, directory } = options;
    if (!options.name) {
      throw new SchematicsException('name option is required.');
    }
    if (!tree.getDir('.').subdirs.includes(directory as any)) {
      throw new SchematicsException(`Directory "${directory}" doesn't exist`);
    }

    const dashedName = strings.dasherize(name);
    const packagePath = Path.join(directory, dashedName);

    context.addTask(
      new NodePackageInstallTask({
        workingDirectory: packagePath,
        packageManager: 'yarn'
      })
    );

    let source = apply(url('../../templates/package'), [
      applyTemplates({
        packageName: dashedName,
        dot: '.',
        camelize: strings.camelize,
        dasherize: strings.dasherize
      }),
      move(packagePath)
    ]);

    return chain([
      mergeWith(source),
      addProjectToGarmentJson({
        garmentJsonPath: '/garment.json',
        name: dashedName,
        path: packagePath,
        extendProjects: ['tspackage']
      })
    ]);
  };
}
Example #20
Source File: index.ts    From form-schematic with MIT License 5 votes vote down vote up
// You don't have to export the function as default. You can also have more than one rule factory
// per file.
export function forms(_options: OptionsFormSchema): Rule {
	return (tree: Tree, _context: SchematicContext) => {
		// Log
		// context.logger.info('Info message');
		// context.logger.warn('Warn message');
		// context.logger.error('Error message');
		const workspaceConfig = tree.read('/angular.json');

		if (!workspaceConfig) {
			throw new NotValidAngularWorkspace();
		}

		const workspaceContent = workspaceConfig.toString();

		const workspace: workspace.WorkspaceSchema = JSON.parse(
			workspaceContent
		);

		if (!_options.project) {
			_options.project = workspace.defaultProject || '';
		}

		const projectName = _options.project;
		const project = workspace.projects[projectName];

		const jsonFormConfig = tree.read(`${_options.config}`);

		if (!jsonFormConfig) {
			throw new FormJsonNotFoundError();
		}

		const jsonFormContent = jsonFormConfig.toString();

		const formJsonObj = new FormJson(JSON.parse(jsonFormContent));

		const projectType =
			project.projectType === 'application'
				? ProjetTypeEnum.APP
				: ProjetTypeEnum.LIB;

		if (!_options.path) {
			_options.path = `${project.sourceRoot}/${projectType}`;
		}
		const parsedOptions = parseName(_options.path, _options.name);
		_options = { ..._options, ...parsedOptions };

		const templateSource = apply(url('./templates/forms'), [
			renameTemplateFiles(),
			template({
				...strings,
				..._options,
				formJsonObj
			}),
			move(normalize((_options.path + '/' + _options.name) as string))
		]);

		return chain([
			branchAndMerge(chain([mergeWith(templateSource)])),
			addTreeModulesToModule(_options),
			addDeclarationsToModule(_options)
		])(tree, _context);
	};
}
Example #21
Source File: index.ts    From garment with MIT License 5 votes vote down vote up
export default function(options: PackageSchematicOptions): Rule {
  return (_tree: Tree, context: SchematicContext) => {
    const { name } = options;

    if (!options.name) {
      throw new SchematicsException('name option is required.');
    }

    const directory = 'plugins';

    const dashedName = strings.dasherize(name);
    const projectName = 'runner-' + dashedName;

    const packagePath = Path.join(directory, projectName);

    context.addTask(
      new NodePackageInstallTask({
        workingDirectory: packagePath,
        packageManager: 'yarn'
      })
    );

    let source = apply(url('../../templates/runner'), [
      applyTemplates(
        {
          name,
          dot: '.',
          ...strings
        },
        { interpolationStart: '___', interpolationEnd: '___' }
      ),
      move(packagePath)
    ]);

    return chain([
      mergeWith(source),
      addPackageJsonDependencies(
        `${packagePath}/package.json`,
        'core/runner/package.json',
        'utils/fixture-helper/package.json'
      ),
      addProjectToGarmentJson({
        garmentJsonPath: '/garment.json',
        name: projectName,
        path: packagePath,
        extendProjects: ['tspackage', 'copy-other-files']
      })
    ]);
  };
}
Example #22
Source File: index.ts    From garment with MIT License 5 votes vote down vote up
export default function(options: Options): Rule {
  return (_tree: Tree, context: SchematicContext) => {
    const { name } = options;
    if (!options.name) {
      throw new SchematicsException('name option is required.');
    }

    const directory = 'plugins';

    const dashedName = strings.dasherize(name);
    const projectName = dashedName;

    context.logger.info(`Creating project called "${projectName}"...`);

    const packagePath = Path.join(directory, projectName);

    context.addTask(
      new NodePackageInstallTask({
        workingDirectory: packagePath,
        packageManager: 'yarn'
      })
    );

    let source = apply(url('../../templates/plugin'), [
      applyTemplates({
        name,
        ...strings
      }),
      move(packagePath)
    ]);

    return chain([
      mergeWith(source),
      addPackageJsonDependencies(
        `${packagePath}/package.json`,
        'core/workspace/package.json'
      ),
      addProjectToGarmentJson({
        garmentJsonPath: '/garment.json',
        name: projectName,
        path: packagePath,
        extendProjects: ['tspackage']
      })
    ]);
  };
}
Example #23
Source File: library.loader.ts    From angular-miniprogram with MIT License 4 votes vote down vote up
export default async function (
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  this: webpack.LoaderContext<any>,
  data: string,
  map: string
) {
  const callback = this.async();
  const selector = createCssSelectorForTs(data);
  const list = selector.queryAll(`BinaryExpression[left$=ɵcmp]`);
  if (!list.length) {
    callback(undefined, data, map);
    return;
  }
  const context: ComponentTemplateLoaderContext = (this._compilation! as any)[
    ExportMiniProgramAssetsPluginSymbol
  ];
  const templateScopeOutside = (this._compilation as any)[
    TemplateScopeSymbol
  ] as TemplateScopeOutside;
  const scopeLibraryObj: Record<string, ExtraTemplateData[]> = {};
  for (let i = 0; i < list.length; i++) {
    const element = list[i] as ts.BinaryExpression;
    const componentName = (
      element.left as ts.PropertyAccessExpression
    ).expression.getText();
    const extraNode = selector.queryOne(
      `VariableDeclaration[name="${componentName}_${LIBRARY_COMPONENT_METADATA_SUFFIX}"]`
    ) as ts.VariableDeclaration;
    if (!extraNode) {
      continue;
    }
    const content = extraNode.initializer!.getText();
    const meta: ExportLibraryComponentMeta = literalResolve(content);
    (this._compilation as any)[LibrarySymbol] =
      (this._compilation as any)[LibrarySymbol] || {};
    const libraryLoaderContext: LibraryLoaderContext = (
      this._compilation as any
    )[LibrarySymbol];
    libraryLoaderContext.libraryMetaList =
      libraryLoaderContext.libraryMetaList || [];
    libraryLoaderContext.libraryMetaList.push({
      ...meta,
      context: this.context,
      importPath: this.resourcePath,
      contextPath: this.utils.contextify(this.rootContext, this.resourcePath),
    });
    const fileExtname = libraryLoaderContext.buildPlatform.fileExtname;
    libraryLoaderContext.libraryMetaList.forEach((item) => {
      const globalTemplatePath = join(
        normalize('/library-template'),
        strings.classify(item.moduleId) +
          libraryLoaderContext.buildPlatform.fileExtname.contentTemplate
      );
      const LIBRARY_SCOPE_ID = libraryTemplateScopeName(item.moduleId);
      const configPath = join(
        normalize(LIBRARY_OUTPUT_ROOTDIR),
        item.libraryPath + fileExtname.config
      );
      const list = scopeLibraryObj[LIBRARY_SCOPE_ID] || [];
      list.push({
        configPath: configPath,
        useComponents: item.useComponents,
        templateList: [],
        templatePath: globalTemplatePath,
      });

      scopeLibraryObj[LIBRARY_SCOPE_ID] = list;
      const libraryTemplateLiteralConvertOptions: LibraryTemplateLiteralConvertOptions =
        {
          directivePrefix:
            libraryLoaderContext.buildPlatform.templateTransform.getData()
              .directivePrefix,
          eventListConvert:
            libraryLoaderContext.buildPlatform.templateTransform
              .eventListConvert,
          templateInterpolation:
            libraryLoaderContext.buildPlatform.templateTransform
              .templateInterpolation,
          fileExtname: libraryLoaderContext.buildPlatform.fileExtname,
        };
      this.emitFile(
        join(
          normalize(LIBRARY_OUTPUT_ROOTDIR),
          item.libraryPath + fileExtname.content
        ),
        `<import src="${globalTemplatePath}"/>` +
          literalResolve(
            `\`${item.content}\``,
            libraryTemplateLiteralConvertOptions
          )
      );
      if (item.contentTemplate) {
        this.emitFile(
          join(
            normalize(LIBRARY_OUTPUT_ROOTDIR),
            dirname(normalize(item.libraryPath)),
            'template' + fileExtname.contentTemplate
          ),
          `<import src="${globalTemplatePath}"/>` +
            literalResolve(
              `\`${item.contentTemplate}\``,
              libraryTemplateLiteralConvertOptions
            )
        );
      }
      if (item.style) {
        this.emitFile(
          join(
            normalize(LIBRARY_OUTPUT_ROOTDIR),
            item.libraryPath + fileExtname.style
          ),
          item.style
        );
      }
    });
  }
  for (const key in scopeLibraryObj) {
    if (Object.prototype.hasOwnProperty.call(scopeLibraryObj, key)) {
      const element = scopeLibraryObj[key];
      templateScopeOutside.setScopeLibraryUseComponents(key, element);
    }
  }
  callback(undefined, data, map);
}