pankod / superplate Goto Github PK

neler olmali

Apollo GraphQL'i anlatan bir paragraf yazı ve kod örneklerini ekleyelim.

typesvript type'ları nasıl sync'leyeceğini ve apollo.config.js'de graphql endpointini güncellemesi gerektiğini anlatalım

Analytics benzeri bir şey entegre edebilir miyiz? Hangi plugin'ler çok kullanılmış vs görebiliriz

styled'ı anlatan bir paragrafı kendi sitesinden alalım, landing page'in gif'ini ekleyelim. (dark mode switch yapan, bu konuda ben yardımcı olabilirim).

tip/hint olarak eğer styled component seçilirse, styled-system'in de seçenek olarak sunduğumuzu belirtelim ve altıda styled-system'i anlatan bir paragraf ekleyelim. Mümkünse bizim plugin'den kod örneği ekleyelim

Fetch'i anlatan bir paragraf yazı ve plugin'de bulunan kod örneğini ekleyebiliriz (next.js içinde builtin geldiğini anlatan next dökümanına linkte verebiliriz)

info Removed twld/node_modules/domhandler/src/index.spec.ts

testleri silmesi icin action eklemistik ama node_modules'e de mudahale ediyor.

benzer bir sey #81 isi icinde gecerli olacak.

related: pankod/superplate-core-plugins#36

Tailwind ile ilgili bir paragraf yazı ve sitesine link.

Tailwind landing'den bir screenshot. Tailwind ve bizim proje arasında bir tip vermemiz gerekiyorsa verebiliriz

Analytics benzeri bir şey entegre edebilir miyiz? Hangi plugin'ler çok kullanılmış vs görebiliriz

let the hunger games begin

README çok açıklayıcı olmadı benim için. Sanırım erken bir sahfada keşfettim repoyu.

gatsby-cli

hangi teknolojileri kullanıyorlar ?

• yargs - commander alternatifi, cli komutlarini bununla yonetiyorlar aslinda.
• enquirer - gatsby new komutunda soru ve secimler icin kullaniliyor
• ansi-colors - reporter isminde bir fonksiyon tutuyorlar her pakette ansi-colors'la renklendirip console.log yapiyor
• tiny-spin - mini minnacik bir cli spinner. cok tatli 🍬
• execa - child processleri olusturup yonetmeyi sagliyor.

unit testleri nasıl yazmışlar ?

gatsby-cli: pek bir sey yok
create-gatsby: burasi bizim icinde cok degerli saniyorum. execa, reporter, fs gibi paketler mocklanmis ve aslinda cli komutunu calistirip bu paketlerin ne sekillerde cagrildigi kontrol edilmis. ornek olarak ekliyorum:

...
      await initStarter(`gatsby-starter-hello-world`, `./somewhere`, [])

      expect(execa).toBeCalledWith(`git`, [
        `clone`,
        `gatsby-starter-hello-world`,
        `--recursive`,
        `--depth=1`,
        `--quiet`,
      ])
...

...
      await initStarter(`gatsby-starter-hello-world`, `./somewhere`, [
        `one-package`,
      ])

      expect(fs.remove).toBeCalledWith(`yarn.lock`)
      expect(reporter.success).toBeCalledWith(`Installed Gatsby`)
      expect(reporter.success).toBeCalledWith(`Installed plugins`)
      expect(reporter.panic).not.toBeCalled()
      expect(execa).toBeCalledWith(
        `npm`,
        [`install`, `--loglevel`, `error`, `--color`, `always`],
        { stderr: `inherit` }
      )
...

console output'larını nasıl basıyorlar ?

ansi-colors la birlikte console.log yapiliyor. reporter objesi de success, fail, verbose gibi renklendirilmis console ciktisi veren fonksiyonlardan olusuyor yalnizca. ayni zamanda hatalar icin de pretty-error kullaniliyor. bu konuda cogunlukla farkli bir yaklasim cikacagini zannetmiyorum.

question'ları nasıl yönetiyorlar ? (question validasyonları, default questionlar, optional questionlar)

gatsby sorulari enquirer la soruyor, soru metinleri harcoded, optionlar da birer json icerisinde, style sorusunun optionlarini iceren json i paylasiyorum

{
  "gatsby-plugin-postcss": { "message": "CSS Modules/PostCSS", "dependencies": ["postcss"] },
  "gatsby-plugin-styled-components": { "message": "styled-components", "dependencies": ["styled-components", "babel-plugin-styled-components"] },
  "gatsby-plugin-emotion": { "message": "Emotion", "dependencies": ["@emotion/react", "@emotion/styled"] },
  "gatsby-plugin-sass": { "message": "Sass", "dependencies": ["node-sass"] },
  "gatsby-plugin-theme-ui": {
    "message": "Theme UI",
    "dependencies": ["theme-ui"]
  }
}

enquirer bu konuda sanirim vazgecilmez durumda.

kodu nasıl parçalıyorlar? unit test olsun mu? eslint olsun mu? seçeneklerini üretilen projenin içine nasıl inject ediyorlar ?

gatsby bir cok pakete bolunmus.

• gatsby-cli ornegin new komutunda aslinda create-gatsby paketini cagiriyor.
• create-gatsby paketi pluginlerin eklenmesi konusunda gatsby-recipes paketini kullaniyor.

ana proje dosyalarını nasıl tutuyorlar? template bir projeleri var onu mu clone alıyorlar ?

bir baz template proje var, onun uzerine pluginler eklenerek ilerliyor. mono-repo calisiyorlar tum pluginler, template ve paketler aslinda bir repo icinde tutuluyor. cok dallanmis bir proje oldugu icin mono repo kullanimi bence mantikli daha yonetilebilir bir kaos ortaya cikiyor en azindan 🤣

cli versiyonlarını nasıl yönetiyorlar? proje versiyonlamayı nasıl tutuyorlar ?

semver - burayi daha sonra detaylandiracagim

kullandıkları helper function'lar neler ?

• getGatsbyVersion
• isCI
• kebabify 🤣
• normalizePluginName
• init-starter dosyasindaki fonksiyonlar bence cok degerli
  • clone
  • setNameInPackage
  • install
• devamini ekleyecegim, create-gatsby icin kullanilan fonksiyonlar bizim de cok isimize yarayacaktir

Component eklerken sadece mobx eklensin mi bunu soruyor. Bizdeki kadar çok soru yok.

Hangi teknolojileri kullanıyorlar ?

İşlemleri kendi geliştirdikleri Gluegun toolkit ile işlemleri yapıyorlar.

CLI geliştirmek için gerekli paketler bu tool içine toplamışlar.Arka planda populer npm paketleri kullanılmış.

• Console basma, komutlar alma vs buradaki methodların kullandığı paketler ile yapılmış.

https://github.com/infinitered/gluegun#whats-under-the-hood

https://github.com/infinitered/gluegun/blob/master/docs/toolbox-api.md

Plugin desteği

Bazı hazır paketler plugin olarak projeye yüklenebiliyor.

https://github.com/infinitered/ignite/blob/master/PLUGINS.md

$ ignite add {plugin name}

• Kullanılmak istenilen npm paketi ile tanımlanan template ile component oluşturup, projede custom plugin olarak kullanılabiliyor.

Buradaki fonksiyon içlerinde de yine Glugun toolkit methodları kullanılmış.

$ ignite plugin new {plugin name}

• Komutundan sonra oluşturulan klasörde oluşan dosyalara template ve npm paket bilgilerini ekleyerek custum plugin yapmayı sağlamışlar.
• Oluşturulan plugin node_modules eklenir

https://github.com/infinitered/ignite/blob/master/docs/advanced-guides/creating-plugins.md

Belki bizde bazı paketleri optional plugin şeklinde yapabiliriz.

Unit testler

• Boilerplate oluştururken Optional olarak Detox e2e yükleme seceneği sunuyor

https://github.com/wix/Detox

$ ignite generate component awesomecomp

• Boilerplate ile eklenen componentlere test dosyası eklenmiyor.

• Component storybookları için snapshot testleri eklenmiş.

import initStoryshots *  from  "@storybook/addon-storyshots"
initStoryshots({ configPath: "./storybook", framework: `"react-native"})

• Oluşturulan boilerplate içindeki test klasöründe

jest.mock("@react-native-community/async-storage", () => mockAsyncStorage)

Benzer şekilde i18n, react-native-localize mocklanmış

• Projedeki bütün helper methodlarının testine bakılmamış.src/extensions deki dosyalar için sadece:

expect(typeof extension).toBe('function')

Helper methodları doğru değer döndürdüğüne mock data göndererek bakılmış.

test('plugin-less', () => {
  const toolbox = {
    filesystem: { separator: path.sep },
    runtime: {
      plugins: [],
    },
  }
  const findIgnitePlugin = extension(toolbox)
  expect(findIgnitePlugin()).toEqual([])
})

  test('detects https git source', async () => {
    const actual = detectInstall('https://github.com/infinitered/ignite.git', { filesystem })
    const expectd = {
      moduleName: 'ignite',
      type: 'git',
      url: 'https://github.com/infinitered/ignite.git',
    }

    expect(actual).toEqual(expectd)
  })

Helpers

• Kullandıkları yardımcı methodların neredeyse tümü Gluegun dan alınmış.
  Örnek:

 const { parameters, strings, print, filesystem, system, ignite, prompt, runtime, meta } = toolbox
 const { isBlank, upperFirst, camelCase } = strings

Boilerplate kurulum akışı

$ ignite new awesomeboilerplate

• Gerekli validasyonlar yapılıp, ana dizin oluşturulır ve boilerplate-install dosyasındaki helper ile boilerplate yükleme akışı başlıyor.

• Seçilen boilerplate yüklemek için detect-install helper ile yüklenecek boilerplate dosyasının nereden çekileceği saptanıyor.(npm, git veya project directory)

Örnek return; boilerplate npm paketi olarak çekilecek.

  return {
    moduleName: packageName,
    version: packageVersion,
    type: 'npm',
  }

Boilerplate dosyaları cli içinde tutulmuyor. Kullancının sececeği boilerplate e göre dışarıdan çekilip node_modules e koyuluyor.

• Boilerplate tipi belirlendikten sonra import-plugin helper ile boilerplate kurulumu yapılacak komut belirleniyor

Örnek command;

npm i ${target}${packageVersion} --save-dev
ve
system.run(command) ile komut çalıştırılıp node_modules e boilerplate dosyası yükleniyor.

• Bu şekilde ignite-bower boilerplate node_modules e çekilir.

• ignite-bower içinde ki install methodu ile kurulum başlatıyor

• ignite-bower boilerplate yapısı

Proje root ignite-cli için oluşturulmuş.

• ignite-bowser/templates içinde component, model, screen vs. templateleri
• ignite-bowser/src/commands/generate burada ignite-cli projeye yukarıdaki templateleri eklemek için kullanacağı methodlar koyulmuş.

Esas boilerplate kodlarını ignite-bowser/boilerplate/ içinde ve buradaki bazı dosyalar template olarak koyulmuş.
Boilerplate kurarken sorduğu, expo kullanmak, detox e2e testi eklemek ister misin soru cevaplarına göre bu dosyalar oluşuyor.

$ ignite doctor

• Development env dependencies lere bakmak için komut eklenmiş.

Issue larda debug edilmesini kolaylaştırması için faydalı oluyormuş. Belki bizim cli a eklenebilir.

• Değerler Gluegun toolkit içindeki which paket ve os paketi ile alınmış.

Örnek çıktı

System
  platform           darwin                                                
  arch               x64                                                   
  cpu                4 cores      Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz 
  directory          inginteapp   /Users/necati/Documents/inginteapp       

JavaScript
  node               12.12.0      /Users/necati/.nvm/versions/node/v12.12.0/bin/node 
  npm                6.11.3       /Users/necati/.nvm/versions/node/v12.12.0/bin/npm  
  yarn               1.22.10      /usr/local/bin/yarn                                

Ignite
  ignite-cli           3.5.3              /usr/local/bin/ignite                                           
  ignite src           build              /Users/necati/.config/yarn/global/node_modules/ignite-cli/build 
  navigation           react-navigation                                                                   
  generators                                                                                              
                       component          ignite-bowser                                                   
                       model              ignite-bowser                                                   
                       navigator          ignite-bowser                                                   
                       screen             ignite-bowser                                                   
                       thing              ignite-radio-buttons                                            
  createdWith          3.5.3                                                                              
  boilerplate          ignite-bowser                                                                      
  boilerplateVersion   5.4.1     

cli-name

hangi teknolojileri kullanıyorlar ?

unit testleri nasıl yazmışlar ?

console output'larını nasıl basıyorlar ?

question'ları nasıl yönetiyorlar ? (question validasyonları, default questionlar, optional questionlar)

kodu nasıl parçalıyorlar? unit test olsun mu? eslint olsun mu? seçeneklerini üretilen projenin içine nasıl inject ediyorlar ?

ana proje dosyalarını nasıl tutuyorlar? template bir projeleri var onu mu clone alıyorlar ?

cli versiyonlarını nasıl yönetiyorlar? proje versiyonlamayı nasıl tutuyorlar ?

kullandıkları helper function'lar neler ?

env'i anlatan bir paragraf yazı, next.js dökümanına link ve plugin'de bulunan kod örneğini ekleyebiliriz

Bootstrap ile ilgili bir paragraf yazı ve sitesine link.

Bir "tip" alanı açıp, bootstrap ve scss seçerse customization'ı kolay yapabileeğini vs bahsedelim. Eğer scss dışında bir css preprocessor kullanırsa scss desteğini nasıl ekleyeceğini anlatalım

Storybook'u anlatan bir paragraf yazı ve plugin'de bulunan kod örneğini ekleyebiliriz.

Bizim storybook'umuzdan bir gif paylaşabiliriz. bence styled'lı versiyonunun theme desteği olduğu için onun gif'ini ekleyebiliriz

• package.json'dan isim degisikligi yapalim
• commander'a yazdigimiz bilgileri guncelleyelim uygun sekilde
• pluginlerde gecen isimleri guncelleyelim(next-cli veya electio)
• repo isimlerini degistirelim

graphql-request'i anlatan bir paragraf yazı ve kod örneklerini ekleyelim.

typescript type'ları nasıl sync'leyeceğini ve codegen.yaml graphql endpointini güncellemesi gerektiğini anlatalım

Chakra UI ile ilgili bir paragraf yazı ve sitesine link.

Chakra UI landing'den bir screenshot. Chakra UI ve bizim proje arasında bir tip vermemiz gerekiyorsa verebiliriz. Customization hakkında kendi dökümanlarına bir link bırakabiliriz.

create-react-app

hangi teknolojileri kullanıyorlar ?

• commander 🇮🇱
• chalk ✏️
• semver #️⃣
• hyperquest 🌎

unit testleri nasıl yazmışlar ?

sadece template option'i icin unit test yazilmis. dogru template i dondurup dondurmedigine dair. cra'nin bir kismi da react-scripts icerisinde yer aliyor (init) burda da test mest yok bam bam bam 💥

console output'larını nasıl basıyorlar ?

console.log + chalk temizzzz 🥇

question'ları nasıl yönetiyorlar ? (question validasyonları, default questionlar, optional questionlar)

cra da boyle bir akis yok tek komut ve optionlar uzerinden ilerliyor

kodu nasıl parçalıyorlar? unit test olsun mu? eslint olsun mu? seçeneklerini üretilen projenin içine nasıl inject ediyorlar ?

fonksiyonel parcalara ayrilmis kodlar, zaten init isleminin bir kismi da node-npm version kontrolleri ve validasyonlardan olusuyor. cra gibi tum islemleri manali fonksiyolara ayirabilirsek typescriptle birikte unit test'e ihtiyacimiz olmayabilir ama eslint kurallarina siki sikiya bagli olmak bence onemli. (cra da oyle)

ana proje dosyalarını nasıl tutuyorlar? template bir projeleri var onu mu clone alıyorlar ?

cra icin template ler aslinda npm veya yarn uzerinde tutulan paketler. ornegin:

• cra-template base
• cra-template-typescript

cra-template- prefixiyle paylasilan paketleri kullanabiliyoruz, tabi belirli sartlari sagliyorsa bu prefix olmadan da template olusturulabiliyor.

install fonksiyonu icerisine react, react-dom, react-scripts ve ilgili template paketi cra-template dependency array olarak gonderiliyor. bu fonksiyon da bir child process olusturup npm install veya yarn pnp komutlarini calistiriyor. 🐣

install isi bitince react-scripts icinden init.js'i cagiriyor bu fonksiyonda indirilen template i ana proje dizinine tasiyor, package.json'i guncelliyor ve git init islemi yapiyor ve ekrana success mesajini basip sonlaniyor.

cli versiyonlarını nasıl yönetiyorlar? proje versiyonlamayı nasıl tutuyorlar ?

cra icin node ve npm versiyonlari onemli bunlar kontrol ediliyor. global install artik izin verilmedigi icin uyariliyor ve process exit yapiliyor. bunun disinda init ve eject disinda projeye mudahale etmedigi icin cli paketinin package.json'i disinda bir versiyon kontrol yapilmiyor. versiyonlari semvere uygun cikiyorlar

kullandıkları helper function'lar neler ?

yapilan her kontrol birer helper olarak calisiyor ornegin:

• isSafeToCreateProjectIn()
• checkAppName()
• checkNpmVersion()
• checkIfOnline()

🙏 emege saygi
➕ rep
⚖️ teraziye tik

daha sonrasinda eklenen pluginler _app veya _document icinde react gerektiren bir degisiklik yaptiginda problem olabiliyor.

belki de bu importu plugin in extend.js ine birakabiliriz bu durumda da yapilan importlari kontrol etmemiz gerekir tekrar etmemeleri icin.

Belki kullanılabilir

kullanılacak package manager'ı soralım

seçenekler

• yarn
• npm

scss'ı anlatan bir paragrafı kendi sitesinden alıp koyalım.

buraya bir "tip/hint" ekleyip, bootstrap seçerse bootstrap customization yapabileceğini belirtip bootstrap dökümanına link verelim

"_.eslintrc": ".eslintrc", dememe rağmen olmadı. Fikri olan?

next-cli --source ***/next-cli-core-plugins ../redux komutunda build alıncak folder app name olarak veriyoruz. Ancak burda farklı bir path için özel karakterler (../) kullanabiliriz. Bunun replace edilmesi gerekiyor.

https://pankod.github.io/next-boilerplate/docs/reverse-proxy bu dökümana benzer bir şey hazırlayabiliriz

Bundle analyzer'i anlatan bir paragraf yazı ve nasıl çalıştırabileceğini anlatan kod örneği

Antd hakkında bir paragraf bilgi veren (kendi sitesinden alınabilir) ve ant'ın sitesine bir yönlendirme yapabiliriz.

Antd ile yapılan landing page'imizin screenshot'ını ekleyebiliriz.

Antd ile less muhabbetimizden bahsedelim (storybook uyumsuzluğu). Neden less desteği eklemediğimizi ve eklemek isterse nasıl ekleyeceğini anlatan bir kod paylaşalım.

https://sao.vercel.app/generator-instance.html#npmclient

Axios'ı anlatan bir paragraf yazı ve plugin'de bulunan kod örneğini ekleyebiliriz

next.js'in kendi sayfasından built in css support hakkında bir paragraf kopyalayalım.

"CAUTION" olarak sadece css module'leri desteklediğini belirtelim.

vue-cli

hangi teknolojileri kullanıyorlar ?

execa(improves child_process)
commander
Inquirer
minimist(parse argument options)
ejs(template)
Puppeteer
ora

unit testleri nasıl yazmışlar ?

e2e

her plugin kendi e2e'sini yazmış yazmışsa. Ana pakette e2e için sadece hot reload test edilmiş. genel olarak da config dosyalarına bakılmış.

unit

plugin'lerin genel akışı için ayrı, prompt'lar için ayrı testler yazılmış. test-util'ler içinde test promp'ları ver projeleri için helper'lar var.

yer yer mock'lanan paketler

• fs
• inquirer

console output'larını nasıl basıyorlar ?

chalk ile console üzerine hafif yapılarla birkaç tür çıktı çeşidi yapılmış

question'ları nasıl yönetiyorlar ? (question validasyonları, default questionlar, optional questionlar)

inquirer

kodu nasıl parçalıyorlar? unit test olsun mu? eslint olsun mu? seçeneklerini üretilen projenin içine nasıl inject ediyorlar ?

soruların cevapları ve paslanan argümanlar ayrı ayrı objelerde tutulup en son ilgili metoda veriliyor.
plugin -> creator -> generator -> cli-service -> esj.render

ana proje dosyalarını nasıl tutuyorlar? template bir projeleri var onu mu clone alıyorlar ?

her plugin içinde template halinde dosyaların olduğu dosya sistemi içinde örnek projeler var. Dosyalar oluşturulacağı zaman dosya hiyerarşisine dikkat edilerek template klasöründeki şeyler oluşturuluyor.

cli versiyonlarını nasıl yönetiyorlar? proje versiyonlamayı nasıl tutuyorlar ?

kullandıkları helper function'lar neler ?

@vue/cli-shared-utils/
@vue/cli/lib/util/
@vue/cli-service/lib/util/

https://github.com/pankod/next-cli/blob/master/src/saofile.ts#L141
bunun yerine,

şöyle bir action ekleyebiliriz
https://github.com/pankod/next-cli/blob/master/src/saofile.ts#L202

proje uretildikten sonra simdilik daha anlamli bir mesaj gosterelim

nuxt-cli / create-nuxt-app

proje olusturma kısmı -> create-nuxt-app
npm run dev - npm run build -> nuxt-cli

hangi teknolojileri kullanıyorlar ?

Terminal style için kullanılan paketler:

• consola -> terminalde yer alan textler, iconlar, tagler için kullanılmış.
• chalk -> terminaldeki textlerin renk ve boyutları için kullanılmış.
• boxen -> terminal üzerinde kutu oluşturmak için kullanılmış.

Node.js ve fonksiyonel işlemler için kuallanılan paketler:

• execa -> child_process yöntemlerini iyileştirmek için kullanılmış. (stdin, stderr, stdout gibi)
• minimist -> argüment optionslarını parse etmek için kullanılmış.
• hookable -> hooklar için kullanılmış.
• globby -> fast-glob diye bir pakete dayanarak hazırlanmış bir paket. dizinleri genişletmek için kullanılmış.
  örn : (foo -> foo/**/*)
• destr -> JSON.parse işlemleri için kullanılmış.
• compression -> node.js sıkıştırmak için kullanılmış. (?)
• dotenv / dotenv-expand

create-nuxt-app

• sao
• cac -> basit bir cli oluşturmak için paketin 4 API'si var.
  cli.option, cli.version, cli.help, cli.parse.
• envinfo

unit testleri nasıl yazmışlar ?

create-nuxt-app tarafında testler ava kullanılarak sadece tek bir dosyada yazılmış-> index.test.js.

Ama nuxt'ın kendi içindeki cli dosyasında bütün dosyalar için unit testler detaylı olarak yazılmış.
mocking.js içinde command.js dosyasında yer alan helper fonksiyonlar mocklanmış. Unit testlerde; çağrılan fonksiyonların çağrılıp çağrılmadığı, beklenen error mesajları, textlerin renkleri, ilgili fonksiyon çağrıldıktan sonraki çıktıları gibi aslında bizimde unit test yazarken baktığımız noktaları test etmişler.

    expect(chalk.green).nthCalledWith(2, 'build')

  test('loadNuxtConfig: defaults', async () => {
    const argv = {
      _: ['.'],
      'config-file': 'nuxt.config.js',
      universal: true
    }
    const options = await loadNuxtConfig(argv)
    expect(options.mode).toBeUndefined()
    expect(options.server.host).toBe('localhost')
    expect(options.server.port).toBe(3000)
    expect(options.server.socket).not.toBeDefined()
  })

  test('catches build error and calls hook', async () => {
    const Nuxt = mockNuxt()
    const Builder = mockBuilder()

    await NuxtCommand.from(dev).run()
    jest.clearAllMocks()

    // Test error on second build so we cover oldInstance stuff
    const builder = new Builder()
    builder.nuxt = new Nuxt()
    Builder.prototype.build = () => { throw new Error('Build Error') }
    await Nuxt.fileRestartHook(builder)

    expect(Nuxt.prototype.close).toHaveBeenCalled()
    expect(Nuxt.prototype.callHook).toHaveBeenCalledWith('cli:buildError', expect.any(Error))
    expect(consola.error).toHaveBeenCalledWith(new Error('Build Error'))
  })

console output'larını nasıl basıyorlar ?

consola + chalk birlikte kullanılıyor.

• consola
• chalk

Nuxt tarafından geliştirilen consola adında bir paketleri var, icon ya da tag eklemek için bunu kullanıyorlar.
Text'i renklendirme ve font-weightler için de chalk kullanılmış.

question'ları nasıl yönetiyorlar ? (question validasyonları, default questionlar, optional questionlar)

soru ve optionları create-nuxt-app -> lib -> prompts.js dosyasında nesneler halinde bir dizi içinde tutuluyor, module.exports yapılıyor.
Alınan cevaplar saofile.js içinde yapılandırılarak projeye ekleniyor.

ana proje dosyalarını nasıl tutuyorlar? template bir projeleri var onu mu clone alıyorlar ?

create-nuxt-app için konuşursak,
Default bir template var, kurulum sırasında seçim yapılan paketleri de indirip, yapılandırarak projeye ekliyor. Template dosyası altında framework klasörü var onun altında optional olarak sunulan bütün kütüphaneler ve paketler dosyalar halinde tutuluyor.
nuxt cli da ise,
commands, options ve utils olarak js dosyaları 3 dosyaya bölünmüş. Test dosyaları src klasörünün dışında. Unit testler burada yazılmış.

cli versiyonlarını nasıl yönetiyorlar? proje versiyonlamayı nasıl tutuyorlar ?

kullandıkları helper function'lar neler ?

nuxt.js cli dosyasındaki command.js içindeki çoğu fonksiyon aslında önemli

• getNuxt
• getBuilder
• getGenerator
• _getHelp()
• getNuxtConfig
• setLock
• _getMinimistOptions

  async run (cmd) {
    const { argv } = cmd

    await this.startDev(cmd, argv, argv.open)
  },

• startDev
• _listenDev
• _buildDev

SVGR'i anlatan bir paragraf yazı ve package.json'da bulunan svgr komutuyla re-create edebileceiğini belirtelim