How to use componentName method in ladle

Best JavaScript code snippet using ladle

demo.js

Source:demo.js Github

copy

Full Screen

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 );...

Full Screen

Full Screen

new.js

Source:new.js Github

copy

Full Screen

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');...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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');

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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}

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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');

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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);

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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}

Full Screen

Full Screen

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.

LambdaTest Learning Hubs:

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run ladle automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful