Unlock 30% off on Manual Testing Annual Plans this Holiday Season.

Copied to Clipboard!

How to use componentName method in ladle

Best JavaScript code snippet using ladle

demo.js

Source:demo.js

1// ç¨å¨ç»ä»¶ææ¡£éï¼å±ç¤ºææ Icon2import React, { useState } from 'react';3import {4  Radio,5  Input,6  Affix,7  Space,8  Slider,9  Select,10  InputNumber,11  Button,12  Modal,13  Typography,14} from '@arco-design/web-react';15import { IconCamera } from '@arco-design/web-react/icon';16import * as icons from '@arco-design/web-react/icon/index.es.js';17import { IconClassifyModal } from './classifyModal';18import { Tooltip } from '@arco-design/web-react';19import { teaLog } from '@arco-design/arco-site-utils';20import { EventMap } from '../site/src/pages/home/utils/eventMap';21const RadioGroup = Radio.Group;22const { Paragraph } = Typography;23const svgData = JSON.parse(24  '{"direction":{"outline":[{"name":"arrow-down","componentName":"IconArrowDown"},{"name":"arrow-fall","componentName":"IconArrowFall"},{"name":"arrow-left","componentName":"IconArrowLeft"},{"name":"arrow-right","componentName":"IconArrowRight"},{"name":"arrow-rise","componentName":"IconArrowRise"},{"name":"arrow-up","componentName":"IconArrowUp"},{"name":"caret-down","componentName":"IconCaretDown"},{"name":"caret-left","componentName":"IconCaretLeft"},{"name":"caret-right","componentName":"IconCaretRight"},{"name":"caret-up","componentName":"IconCaretUp"},{"name":"double-down","componentName":"IconDoubleDown"},{"name":"double-left","componentName":"IconDoubleLeft"},{"name":"double-right","componentName":"IconDoubleRight"},{"name":"double-up","componentName":"IconDoubleUp"},{"name":"down-circle","componentName":"IconDownCircle"},{"name":"down","componentName":"IconDown"},{"name":"drag-arrow","componentName":"IconDragArrow"},{"name":"expand","componentName":"IconExpand"},{"name":"left-circle","componentName":"IconLeftCircle"},{"name":"left","componentName":"IconLeft"},{"name":"menu-fold","componentName":"IconMenuFold"},{"name":"menu-unfold","componentName":"IconMenuUnfold"},{"name":"right-circle","componentName":"IconRightCircle"},{"name":"right","componentName":"IconRight"},{"name":"rotate-left","componentName":"IconRotateLeft"},{"name":"rotate-right","componentName":"IconRotateRight"},{"name":"shrink","componentName":"IconShrink"},{"name":"swap","componentName":"IconSwap"},{"name":"to-bottom","componentName":"IconToBottom"},{"name":"to-left","componentName":"IconToLeft"},{"name":"to-right","componentName":"IconToRight"},{"name":"to-top","componentName":"IconToTop"},{"name":"up-circle","componentName":"IconUpCircle"},{"name":"up","componentName":"IconUp"}]},"tips":{"fill":[{"name":"check-circle-fill","componentName":"IconCheckCircleFill"},{"name":"close-circle-fill","componentName":"IconCloseCircleFill"},{"name":"exclamation-circle-fill","componentName":"IconExclamationCircleFill"},{"name":"exclamation-polygon-fill","componentName":"IconExclamationPolygonFill"},{"name":"info-circle-fill","componentName":"IconInfoCircleFill"},{"name":"minus-circle-fill","componentName":"IconMinusCircleFill"},{"name":"plus-circle-fill","componentName":"IconPlusCircleFill"},{"name":"question-circle-fill","componentName":"IconQuestionCircleFill"}],"outline":[{"name":"check-circle","componentName":"IconCheckCircle"},{"name":"check-square","componentName":"IconCheckSquare"},{"name":"check","componentName":"IconCheck"},{"name":"clock-circle","componentName":"IconClockCircle"},{"name":"close-circle","componentName":"IconCloseCircle"},{"name":"close","componentName":"IconClose"},{"name":"exclamation-circle","componentName":"IconExclamationCircle"},{"name":"exclamation","componentName":"IconExclamation"},{"name":"info-circle","componentName":"IconInfoCircle"},{"name":"info","componentName":"IconInfo"},{"name":"minus-circle","componentName":"IconMinusCircle"},{"name":"minus","componentName":"IconMinus"},{"name":"plus-circle","componentName":"IconPlusCircle"},{"name":"plus","componentName":"IconPlus"},{"name":"question-circle","componentName":"IconQuestionCircle"},{"name":"question","componentName":"IconQuestion"},{"name":"stop","componentName":"IconStop"}]},"interactive-button":{"fill":[{"name":"heart-fill","componentName":"IconHeartFill"},{"name":"star-fill","componentName":"IconStarFill"},{"name":"thumb-down-fill","componentName":"IconThumbDownFill"},{"name":"thumb-up-fill","componentName":"IconThumbUpFill"}],"outline":[{"name":"at","componentName":"IconAt"},{"name":"cloud-download","componentName":"IconCloudDownload"},{"name":"code-block","componentName":"IconCodeBlock"},{"name":"code-square","componentName":"IconCodeSquare"},{"name":"code","componentName":"IconCode"},{"name":"customer-service","componentName":"IconCustomerService"},{"name":"download","componentName":"IconDownload"},{"name":"export","componentName":"IconExport"},{"name":"eye-invisible","componentName":"IconEyeInvisible"},{"name":"eye","componentName":"IconEye"},{"name":"heart","componentName":"IconHeart"},{"name":"history","componentName":"IconHistory"},{"name":"home","componentName":"IconHome"},{"name":"import","componentName":"IconImport"},{"name":"launch","componentName":"IconLaunch"},{"name":"list","componentName":"IconList"},{"name":"message-banned","componentName":"IconMessageBanned"},{"name":"message","componentName":"IconMessage"},{"name":"more-vertical","componentName":"IconMoreVertical"},{"name":"more","componentName":"IconMore"},{"name":"poweroff","componentName":"IconPoweroff"},{"name":"refresh","componentName":"IconRefresh"},{"name":"reply","componentName":"IconReply"},{"name":"save","componentName":"IconSave"},{"name":"scan","componentName":"IconScan"},{"name":"search","componentName":"IconSearch"},{"name":"select-all","componentName":"IconSelectAll"},{"name":"send","componentName":"IconSend"},{"name":"settings","componentName":"IconSettings"},{"name":"share-alt","componentName":"IconShareAlt"},{"name":"share-external","componentName":"IconShareExternal"},{"name":"share-internal","componentName":"IconShareInternal"},{"name":"star","componentName":"IconStar"},{"name":"sync","componentName":"IconSync"},{"name":"thumb-down","componentName":"IconThumbDown"},{"name":"thumb-up","componentName":"IconThumbUp"},{"name":"translate","componentName":"IconTranslate"},{"name":"upload","componentName":"IconUpload"},{"name":"voice","componentName":"IconVoice"}]},"edit":{"outline":[{"name":"align-center","componentName":"IconAlignCenter"},{"name":"align-left","componentName":"IconAlignLeft"},{"name":"align-right","componentName":"IconAlignRight"},{"name":"attachment","componentName":"IconAttachment"},{"name":"bg-colors","componentName":"IconBgColors"},{"name":"bold","componentName":"IconBold"},{"name":"brush","componentName":"IconBrush"},{"name":"copy","componentName":"IconCopy"},{"name":"delete","componentName":"IconDelete"},{"name":"edit","componentName":"IconEdit"},{"name":"eraser","componentName":"IconEraser"},{"name":"filter","componentName":"IconFilter"},{"name":"find-replace","componentName":"IconFindReplace"},{"name":"font-colors","componentName":"IconFontColors"},{"name":"formula","componentName":"IconFormula"},{"name":"h1","componentName":"IconH1"},{"name":"h2","componentName":"IconH2"},{"name":"h3","componentName":"IconH3"},{"name":"h4","componentName":"IconH4"},{"name":"h5","componentName":"IconH5"},{"name":"h6","componentName":"IconH6"},{"name":"h7","componentName":"IconH7"},{"name":"highlight","componentName":"IconHighlight"},{"name":"italic","componentName":"IconItalic"},{"name":"line-height","componentName":"IconLineHeight"},{"name":"link","componentName":"IconLink"},{"name":"oblique-line","componentName":"IconObliqueLine"},{"name":"ordered-list","componentName":"IconOrderedList"},{"name":"original-size","componentName":"IconOriginalSize"},{"name":"paste","componentName":"IconPaste"},{"name":"quote","componentName":"IconQuote"},{"name":"redo","componentName":"IconRedo"},{"name":"scissor","componentName":"IconScissor"},{"name":"sort-ascending","componentName":"IconSortAscending"},{"name":"sort-descending","componentName":"IconSortDescending"},{"name":"sort","componentName":"IconSort"},{"name":"strikethrough","componentName":"IconStrikethrough"},{"name":"underline","componentName":"IconUnderline"},{"name":"undo","componentName":"IconUndo"},{"name":"unordered-list","componentName":"IconUnorderedList"},{"name":"zoom-in","componentName":"IconZoomIn"},{"name":"zoom-out","componentName":"IconZoomOut"}]},"media":{"fill":[{"name":"mute-fill","componentName":"IconMuteFill"},{"name":"pause-circle-fill","componentName":"IconPauseCircleFill"},{"name":"play-arrow-fill","componentName":"IconPlayArrowFill"},{"name":"play-circle-fill","componentName":"IconPlayCircleFill"},{"name":"skip-next-fill","componentName":"IconSkipNextFill"},{"name":"skip-previous-fill","componentName":"IconSkipPreviousFill"},{"name":"sound-fill","componentName":"IconSoundFill"}],"outline":[{"name":"backward","componentName":"IconBackward"},{"name":"forward","componentName":"IconForward"},{"name":"fullscreen-exit","componentName":"IconFullscreenExit"},{"name":"fullscreen","componentName":"IconFullscreen"},{"name":"live-broadcast","componentName":"IconLiveBroadcast"},{"name":"music","componentName":"IconMusic"},{"name":"mute","componentName":"IconMute"},{"name":"pause-circle","componentName":"IconPauseCircle"},{"name":"pause","componentName":"IconPause"},{"name":"play-arrow","componentName":"IconPlayArrow"},{"name":"play-circle","componentName":"IconPlayCircle"},{"name":"record-stop","componentName":"IconRecordStop"},{"name":"record","componentName":"IconRecord"},{"name":"skip-next","componentName":"IconSkipNext"},{"name":"skip-previous","componentName":"IconSkipPrevious"},{"name":"sound","componentName":"IconSound"}]},"logo":{"color":[{"name":"bytedance-color","componentName":"IconBytedanceColor"},{"name":"lark-color","componentName":"IconLarkColor"},{"name":"tiktok-color","componentName":"IconTiktokColor"},{"name":"xigua-color","componentName":"IconXiguaColor"}],"fill":[{"name":"faceBook-circle-fill","componentName":"IconFaceBookCircleFill"},{"name":"facebook-square-fill","componentName":"IconFacebookSquareFill"},{"name":"google-circle-fill","componentName":"IconGoogleCircleFill"},{"name":"qq-circle-fill","componentName":"IconQqCircleFill"},{"name":"twitter-circle-fill","componentName":"IconTwitterCircleFill"},{"name":"weibo-circle-fill","componentName":"IconWeiboCircleFill"}],"outline":[{"name":"alipay-circle","componentName":"IconAlipayCircle"},{"name":"code-sandbox","componentName":"IconCodeSandbox"},{"name":"codepen","componentName":"IconCodepen"},{"name":"facebook","componentName":"IconFacebook"},{"name":"github","componentName":"IconGithub"},{"name":"gitlab","componentName":"IconGitlab"},{"name":"google","componentName":"IconGoogle"},{"name":"qq-zone","componentName":"IconQqZone"},{"name":"qq","componentName":"IconQq"},{"name":"twitter","componentName":"IconTwitter"},{"name":"wechat","componentName":"IconWechat"},{"name":"wechatpay","componentName":"IconWechatpay"},{"name":"weibo","componentName":"IconWeibo"}]},"general":{"fill":[{"name":"chinese-fill","componentName":"IconChineseFill"},{"name":"english-fill","componentName":"IconEnglishFill"},{"name":"face-frown-fill","componentName":"IconFaceFrownFill"},{"name":"face-meh-fill","componentName":"IconFaceMehFill"},{"name":"face-smile-fill","componentName":"IconFaceSmileFill"},{"name":"moon-fill","componentName":"IconMoonFill"},{"name":"pen-fill","componentName":"IconPenFill"},{"name":"sun-fill","componentName":"IconSunFill"}],"outline":[{"name":"apps","componentName":"IconApps"},{"name":"archive","componentName":"IconArchive"},{"name":"book","componentName":"IconBook"},{"name":"branch","componentName":"IconBranch"},{"name":"bug","componentName":"IconBug"},{"name":"bulb","componentName":"IconBulb"},{"name":"calendar-clock","componentName":"IconCalendarClock"},{"name":"calendar","componentName":"IconCalendar"},{"name":"camera","componentName":"IconCamera"},{"name":"cloud","componentName":"IconCloud"},{"name":"command","componentName":"IconCommand"},{"name":"common","componentName":"IconCommon"},{"name":"compass","componentName":"IconCompass"},{"name":"copyright","componentName":"IconCopyright"},{"name":"dashboard","componentName":"IconDashboard"},{"name":"desktop","componentName":"IconDesktop"},{"name":"dice","componentName":"IconDice"},{"name":"drag-dot-vertical","componentName":"IconDragDotVertical"},{"name":"drag-dot","componentName":"IconDragDot"},{"name":"drive-file","componentName":"IconDriveFile"},{"name":"ear","componentName":"IconEar"},{"name":"email","componentName":"IconEmail"},{"name":"empty","componentName":"IconEmpty"},{"name":"experiment","componentName":"IconExperiment"},{"name":"file-audio","componentName":"IconFileAudio"},{"name":"file-image","componentName":"IconFileImage"},{"name":"file-pdf","componentName":"IconFilePdf"},{"name":"file-video","componentName":"IconFileVideo"},{"name":"file","componentName":"IconFile"},{"name":"fire","componentName":"IconFire"},{"name":"folder-add","componentName":"IconFolderAdd"},{"name":"folder-delete","componentName":"IconFolderDelete"},{"name":"folder","componentName":"IconFolder"},{"name":"gift","componentName":"IconGift"},{"name":"idcard","componentName":"IconIdcard"},{"name":"image-close","componentName":"IconImageClose"},{"name":"image","componentName":"IconImage"},{"name":"interaction","componentName":"IconInteraction"},{"name":"language","componentName":"IconLanguage"},{"name":"layout","componentName":"IconLayout"},{"name":"loading","componentName":"IconLoading"},{"name":"location","componentName":"IconLocation"},{"name":"lock","componentName":"IconLock"},{"name":"loop","componentName":"IconLoop"},{"name":"man","componentName":"IconMan"},{"name":"menu","componentName":"IconMenu"},{"name":"mind-mapping","componentName":"IconMindMapping"},{"name":"mobile","componentName":"IconMobile"},{"name":"moon","componentName":"IconMoon"},{"name":"mosaic","componentName":"IconMosaic"},{"name":"nav","componentName":"IconNav"},{"name":"notification-close","componentName":"IconNotificationClose"},{"name":"notification","componentName":"IconNotification"},{"name":"palette","componentName":"IconPalette"},{"name":"pen","componentName":"IconPen"},{"name":"phone","componentName":"IconPhone"},{"name":"printer","componentName":"IconPrinter"},{"name":"public","componentName":"IconPublic"},{"name":"pushpin","componentName":"IconPushpin"},{"name":"qrcode","componentName":"IconQrcode"},{"name":"robot-add","componentName":"IconRobotAdd"},{"name":"robot","componentName":"IconRobot"},{"name":"safe","componentName":"IconSafe"},{"name":"schedule","componentName":"IconSchedule"},{"name":"shake","componentName":"IconShake"},{"name":"skin","componentName":"IconSkin"},{"name":"stamp","componentName":"IconStamp"},{"name":"storage","componentName":"IconStorage"},{"name":"subscribe-add","componentName":"IconSubscribeAdd"},{"name":"subscribe","componentName":"IconSubscribe"},{"name":"subscribed","componentName":"IconSubscribed"},{"name":"sun","componentName":"IconSun"},{"name":"tag","componentName":"IconTag"},{"name":"tags","componentName":"IconTags"},{"name":"thunderbolt","componentName":"IconThunderbolt"},{"name":"tool","componentName":"IconTool"},{"name":"trophy","componentName":"IconTrophy"},{"name":"unlock","componentName":"IconUnlock"},{"name":"user-add","componentName":"IconUserAdd"},{"name":"user-group","componentName":"IconUserGroup"},{"name":"user","componentName":"IconUser"},{"name":"video-camera","componentName":"IconVideoCamera"},{"name":"wifi","componentName":"IconWifi"},{"name":"woman","componentName":"IconWoman"}]}}'25);26const newIcons = JSON.parse(27  '[{"file":"general/outline/palette.svg","name":"IconPalette","version":"2.19.2"},{"file":"general/outline/calendar-clock.svg","name":"IconCalendarClock","version":"2.20.0"}]'28);29const lineCaps = ['butt', 'round', 'square'];30const lineJoins = ['arcs', 'bevel', 'miter', 'miter-clip', 'round'];31const locale = {32  'zh-CN': {33    title: 'å¾æ éç½®',34    line: 'çº¿æ§å¾æ ',35    fill: 'é¢æ§å¾æ ',36    color: 'å¤è²å¾æ ',37    search: 'æç´¢å¾æ ï¼ç¹å»å¯å¤å¶å¾æ ç¨æ³',38    'stroke-width': 'çº¿å®½ï¼',39    size: 'å¾æ å¤§å°ï¼',40    lineJoin: 'æè§ï¼',41    lineCap: 'ç«¯ç¹ï¼',42    desc1: 'å¨å±éç½®ï¼å°ä»¥ä¸çç±»æ·»å å° css ä¸ï¼:',43    desc2: (44      <span>45        åä¸ªç»ä»¶çè¯å¯ä»¥ç´æ¥å°ä»¥ä¸æ ·å¼åå° <code>IconXXX</code> ç <code>style</code> ä¸46      </span>47    ),48    'show-config': 'æ¾ç¤ºéç½®',49    add: 'æ·»å ',50    iconClassifyModalTitle: 'ä¸ä¼ å¾çæç´¢å¾æ ',51  },52  'en-US': {53    title: 'Icon Configuration',54    line: 'Stroke',55    fill: 'Fill',56    color: 'Color',57    search: 'Search icon, click to copy usage',58    'stroke-width': 'Stroke Width:',59    size: 'Size:',60    lineJoin: 'Line Join:',61    lineCap: 'Line Cap:',62    desc1: 'Global configuration (add the following class to css):',63    desc2: (64      <span>65        For a single component, you can directly write the above style to the <code>style</code>66        of <code>IconXXX</code>67      </span>68    ),69    'show-config': 'Show Config',70    add: 'Add',71    iconClassifyModalTitle: 'Upload an image to search for icons',72  },73};74export default function ({ lang = 'zh-CN' }) {75  const [type, setType] = useState('outline');76  const [filter, setFilter] = useState('');77  const [strokeWidth, setStrokeWidth] = useState(4);78  const [lineCap, setLineCap] = useState('butt');79  const [lineJoin, setLineJoin] = useState('miter');80  const [fontSize, setFontSize] = useState(32);81  const sliderStyle = { width: 120, marginRight: 20 };82  const inputNumberStyle = { width: 60 };83  const getWidthStyle = (width) => ({ width });84  const iconStyle = { fontSize };85  const spaceStyle = { justifyContent: 'space-between', whiteSpace: 'nowrap' };86  const [iconClassifyModalVisible, setIconClassifyModalVisible] = useState(false);87  const maps = JSON.parse(88    '{"zh-CN":{"direction":"æ¹åæç¤ºç±»å¾æ ","tips":"æç¤ºå»ºè®®ç±»å¾æ ","interactive-button":"äº¤äºæé®ç±»å¾æ ","edit":"ç¼è¾ç±»å¾æ ","media":"å½±é³ç±»å¾æ ","logo":"åæ ç±»å¾æ ","general":"éç¨ç±»å¾æ "},"en-US":{"direction":"Direction indicator","tips":"Prompt suggestion","interactive-button":"Interactive button","edit":"Editable","media":"Media","logo":"Logo","general":"General"}}'89  )[lang];90  const t = locale[lang];91  return (92    <div>93      <div className="iconlist-bar">94        <RadioGroup95          size="large"96          type="button"97          mode="fill"98          name="type"99          defaultValue="outline"100          onChange={setType}101        >102          <Radio value="outline">{t.line}</Radio>103          <Radio value="fill">{t.fill}</Radio>104          <Radio value="color">{t.color}</Radio>105        </RadioGroup>106        <Input.Search size="large" onChange={setFilter} placeholder={t.search} />107        <Tooltip content={t.iconClassifyModalTitle}>108          <Button109            size="large"110            icon={<IconCamera />}111            style={{ marginLeft: 8 }}112            onClick={() => {113              teaLog(EventMap.searchIconByImg, { type: 'open' });114              setIconClassifyModalVisible(true);115            }}116          />117          <IconClassifyModal118            title={t.iconClassifyModalTitle}119            lang={lang}120            visible={iconClassifyModalVisible}121            onVisibleChange={setIconClassifyModalVisible}122          />123        </Tooltip>124      </div>125      <Affix offsetTop={60} className="iconlist-affix">126        <Space className="iconlist-operations" style={spaceStyle}>127          <Space>128            {t['stroke-width']}129            <Slider130              defaultValue={4}131              style={sliderStyle}132              showTicks133              min={1}134              max={5}135              onChange={(value) => setStrokeWidth(value)}136            />137            {t.size}138            <InputNumber139              min={14}140              max={80}141              value={fontSize}142              onChange={(value) => setFontSize(value)}143              style={inputNumberStyle}144            />145            {t.lineJoin}146            <Select147              options={lineJoins}148              value={lineJoin}149              onChange={(value) => setLineJoin(value)}150              style={getWidthStyle(100)}151            />152            {t.lineCap}153            <Select154              options={lineCaps}155              value={lineCap}156              onChange={(value) => setLineCap(value)}157              style={getWidthStyle(84)}158            />159          </Space>160          <Button161            type="primary"162            onClick={() =>163              Modal.success({164                title: t.title,165                content: (166                  <div>167                    <Paragraph>{t.desc1} </Paragraph>168                    <Paragraph code>{`.arco-icon {169                      font-size: ${fontSize};170                      ${lineCap !== 'butt' ? `stroke-linecap: ${lineCap};` : ''}171                      ${lineJoin !== 'miter' ? `stroke-linejoin: ${lineJoin};` : ''}172                      ${strokeWidth !== 4 ? `stroke-width: ${strokeWidth};` : ''}173                    }`}</Paragraph>174                    <Paragraph>{t.desc2}</Paragraph>175                  </div>176                ),177              })178            }179          >180            {t['show-config']}181          </Button>182        </Space>183      </Affix>184      {Object.keys(svgData).map((key) => {185        const filteredData =186          filter && svgData[key][type]187            ? svgData[key][type].filter((s) => {188                return s.componentName.toLowerCase().indexOf(filter.toLowerCase()) !== -1;189              })190            : svgData[key][type];191        let className = 'iconlist-wrapper';192        if (key === 'out-of-date') {193          className += ' out-of-date';194        }195        return filteredData && filteredData.length ? (196          <div className={className} key={key}>197            <div className="iconlist-title" id={maps[key]}>198              {maps[key]}199            </div>200            <ul className="iconlist">201              {filteredData.map((n) => {202                const Tag = icons[n.componentName];203                const newIcon = newIcons.find((_n) => _n.name === n.componentName);204                return (205                  <li key={n.componentName} className="icon-cell" aria-label={n.componentName}>206                    <div className="icon-show">207                      <Tag208                        strokeWidth={strokeWidth}209                        strokeLinecap={lineCap}210                        strokeLinejoin={lineJoin}211                        style={iconStyle}212                      />213                    </div>214                    <p className="name">{n.componentName}</p>215                    {newIcon ? (216                      <span className="version">217                        {newIcon.version} {t.add}218                      </span>219                    ) : null}220                  </li>221                );222              })}223            </ul>224          </div>225        ) : null;226      })}227    </div>228  );...

new.js

Source:new.js

1'use strict';2console.log();3process.on('exit', () => {4  console.log();5});6if (!process.argv[2]) {7  console.error('[ç»ä»¶å]å¿å¡« - Please enter new component name');8  process.exit(1);9}10const path = require('path');11const fs = require('fs');12const fileSave = require('file-save');13const uppercamelcase = require('uppercamelcase');14const componentname = process.argv[2];15const chineseName = process.argv[3] || componentname;16const ComponentName = uppercamelcase(componentname);17const PackagePath = path.resolve(__dirname, '../../packages', componentname);18const Files = [19  {20    filename: 'index.js',21    content: `import ${ComponentName} from './src/main';22/* istanbul ignore next */23${ComponentName}.install = function(Vue) {24  Vue.component(${ComponentName}.name, ${ComponentName});25};26export default ${ComponentName};`27  },28  {29    filename: 'src/main.vue',30    content: `<template>31  <div class="el-${componentname}"></div>32</template>33<script>34export default {35  name: 'El${ComponentName}'36};37</script>`38  },39  {40    filename: path.join('../../examples/docs/zh-CN', `${componentname}.md`),41    content: `## ${ComponentName} ${chineseName}`42  },43  {44    filename: path.join('../../examples/docs/en-US', `${componentname}.md`),45    content: `## ${ComponentName}`46  },47  {48    filename: path.join('../../examples/docs/es', `${componentname}.md`),49    content: `## ${ComponentName}`50  },51  {52    filename: path.join('../../examples/docs/fr-FR', `${componentname}.md`),53    content: `## ${ComponentName}`54  },55  {56    filename: path.join('../../test/unit/specs', `${componentname}.spec.js`),57    content: `import { createTest, destroyVM } from '../util';58import ${ComponentName} from 'packages/${componentname}';59describe('${ComponentName}', () => {60  let vm;61  afterEach(() => {62    destroyVM(vm);63  });64  it('create', () => {65    vm = createTest(${ComponentName}, true);66    expect(vm.$el).to.exist;67  });68});69`70  },71  {72    filename: path.join('../../packages/theme-chalk/src', `${componentname}.scss`),73    content: `@import "mixins/mixins";74@import "common/var";75@include b(${componentname}) {76}`77  },78  {79    filename: path.join('../../types', `${componentname}.d.ts`),80    content: `import { ElementUIComponent } from './component'81/** ${ComponentName} Component */82export declare class El${ComponentName} extends ElementUIComponent {83}`84  }85];86// æ·»å å° components.json87const componentsFile = require('../../components.json');88if (componentsFile[componentname]) {89  console.error(`${componentname} å·²åå¨.`);90  process.exit(1);91}92componentsFile[componentname] = `./packages/${componentname}/index.js`;93fileSave(path.join(__dirname, '../../components.json'))94  .write(JSON.stringify(componentsFile, null, '  '), 'utf8')95  .end('\n');96// æ·»å å° index.scss97const sassPath = path.join(__dirname, '../../packages/theme-chalk/src/index.scss');98const sassImportText = `${fs.readFileSync(sassPath)}@import "./${componentname}.scss";`;99fileSave(sassPath)100  .write(sassImportText, 'utf8')101  .end('\n');102// æ·»å å° element-ui.d.ts103const elementTsPath = path.join(__dirname, '../../types/element-ui.d.ts');104let elementTsText = `${fs.readFileSync(elementTsPath)}105/** ${ComponentName} Component */106export class ${ComponentName} extends El${ComponentName} {}`;107const index = elementTsText.indexOf('export') - 1;108const importString = `import { El${ComponentName} } from './${componentname}'`;109elementTsText = elementTsText.slice(0, index) + importString + '\n' + elementTsText.slice(index);110fileSave(elementTsPath)111  .write(elementTsText, 'utf8')112  .end('\n');113// åå»º package114Files.forEach(file => {115  fileSave(path.join(PackagePath, file.filename))116    .write(file.content, 'utf8')117    .end('\n');118});119// æ·»å å° nav.config.json120const navConfigFile = require('../../examples/nav.config.json');121Object.keys(navConfigFile).forEach(lang => {122  let groups = navConfigFile[lang][4].groups;123  groups[groups.length - 1].list.push({124    path: `/${componentname}`,125    title: lang === 'zh-CN' && componentname !== chineseName126      ? `${ComponentName} ${chineseName}`127      : ComponentName128  });129});130fileSave(path.join(__dirname, '../../examples/nav.config.json'))131  .write(JSON.stringify(navConfigFile, null, '  '), 'utf8')132  .end('\n');...

Using AI Code Generation

1var ladle = require('ladle');2var component = ladle.componentName();3console.log(component);4var ladle = require('ladle');5var component = ladle.componentName();6console.log(component);7var ladle = require('ladle');8var component = ladle.componentName();9console.log(component);10var ladle = require('ladle');11var component = ladle.componentName();12console.log(component);13var ladle = require('ladle');14var component = ladle.componentName();15console.log(component);16var ladle = require('ladle');17var component = ladle.componentName();18console.log(component);19var ladle = require('ladle');20var component = ladle.componentName();21console.log(component);22var ladle = require('ladle');23var component = ladle.componentName();24console.log(component);25var ladle = require('ladle');26var component = ladle.componentName();27console.log(component);28var ladle = require('ladle');29var component = ladle.componentName();30console.log(component);31var ladle = require('ladle');32var component = ladle.componentName();33console.log(component);34var ladle = require('ladle');35var component = ladle.componentName();36console.log(component);37var ladle = require('ladle');38var component = ladle.componentName();39console.log(component);40var ladle = require('ladle');41var component = ladle.componentName();

Using AI Code Generation

1var ladle = require('ladle');2var component = ladle.componentName();3var ladle = require('ladle');4var component = ladle.component();5var ladle = require('ladle');6var component = ladle.component({configFile: 'config.json'});7var ladle = require('ladle');8var component = ladle.component({configFile: 'config.json', logDir: 'logs'});9var ladle = require('ladle');10var component = ladle.component({configFile: 'config.json', logDir: 'logs', logLevel: 'debug'});11var ladle = require('ladle');12var component = ladle.component({configFile: 'config.json', logDir: 'logs', logLevel: 'debug', logFile: 'myLog.log'});13var ladle = require('ladle');14var component = ladle.component({configFile: 'config.json', logDir: 'logs', logLevel: 'debug', logFile: 'myLog.log', logSize: 1000000});15var ladle = require('ladle');16var component = ladle.component({configFile: 'config.json', logDir: 'logs', logLevel: 'debug', logFile: 'myLog.log', logSize: 1000000, logCount: 5});17var ladle = require('ladle');

Using AI Code Generation

1var ladle = require('./ladle.js');2var ladleObject = new ladle();3console.log(ladleObject.componentName());4module.exports = function(){5    this.componentName = function(){6        return "ladle";7    }8}

Using AI Code Generation

1var ladle = require('ladle');2var componentName = ladle.componentName;3var compName = componentName();4console.log(compName);5var ladle = require('ladle');6var componentName = ladle.componentName;7var compName = componentName();8console.log(compName);9var ladle = require('ladle');10var componentName = ladle.componentName;11var compName = componentName();12console.log(compName);13var ladle = require('ladle');14var componentName = ladle.componentName;15var compName = componentName();16console.log(compName);17var ladle = require('ladle');18var componentName = ladle.componentName;19var compName = componentName();20console.log(compName);21var ladle = require('ladle');22var componentName = ladle.componentName;23var compName = componentName();24console.log(compName);25var ladle = require('ladle');26var componentName = ladle.componentName;27var compName = componentName();28console.log(compName);29var ladle = require('ladle');30var componentName = ladle.componentName;31var compName = componentName();32console.log(compName);33var ladle = require('ladle');34var componentName = ladle.componentName;35var compName = componentName();36console.log(compName);37var ladle = require('ladle');38var componentName = ladle.componentName;39var compName = componentName();40console.log(compName);41var ladle = require('ladle');42var componentName = ladle.componentName;43var compName = componentName();44console.log(compName);45var ladle = require('ladle');

Using AI Code Generation

1var ladle = require('ladle');2var componentName = ladle.componentName;3var component = componentName('test');4console.log(component);5var ladle = require('ladle');6var componentName = ladle.componentName;7var component = componentName('test2');8console.log(component);9var ladle = require('ladle');10var componentName = ladle.componentName;11var component = componentName('test3');12console.log(component);13var ladle = require('ladle');14var componentName = ladle.componentName;15var component = componentName('test');16console.log(component);17var component2 = componentName();18console.log(component2);19var ladle = require('ladle');20var componentName = ladle.componentName;21var component = componentName('test');22console.log(component);23var ladle = require('ladle');24var componentName = ladle.componentName;25var component = componentName('test2');26console.log(component);27var ladle = require('ladle');28var componentName = ladle.componentName;29var component = componentName('test3');30console.log(component);

Using AI Code Generation

1var ladle = require('ladle');2var log = ladle.createLogger({3});4log.debug('this is a test');5log.info('this is a test');6log.warn('this is a test');7log.error('this is a test');8log.fatal('this is a test');9var ladle = require('ladle');10var log = ladle.createLogger({11});12log.debug('this is a test');13log.info('this is a test');14log.warn('this is a test');15log.error('this is a test');16log.fatal('this is a test');17{"name":"test","hostname":"hostName","pid":1234,"level":20,"component":"test","msg":"this is a test","time":"2013-06-10T23:20:17.000Z","v":0}18{"name":"test","hostname":"hostName","pid":1234,"level":20,"component":"other","msg":"this is a test","time":"2013-06-10T23:20:17.000Z","v":0}

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.