diff --git a/README.md b/README.md index 3b033efa..a7d78a05 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ What follows below are some more detailed notes taken directly from the episodes To help others, my note taking notation and method described is described here: - H2 format is Antfu's headings, H3 sub-headings are my own grouping of concepts and sub-chapters to help my search & find later. -- [ this typically refers to code ] , meaning placing code comments between the brackets, which might also refer to the headline of the a key concept being discussed. +- `this typically refers to code` and might also refer to the headline of the a key concept being discussed. - Footnotes are a little extrapolation my end; usually interesting call outs based on readings of links provided, which may also interest you. - (NH), refers to my own words, sometime taking liberty of interpretation of Antfu's words, in-line within Antfu's other comments. These (NH) comments may jump to conclusions which would land the reader in the wrong spot. (I call them out, as a 'reader beware', as I might be completely off track with these notes). @@ -53,8 +53,8 @@ Antfu says, 'The actual build process is part of the process, so lets see how we ### Installing packages & setup - Antfu follow documentation sites and implements from scratch for this project. - - [Nuxt docs](https://nuxt.com/docs/getting-started/installation#new-project) - choosing [ npx nuxi-latest init learn.nuxt.com ] - - [Adding Modules](https://nuxt.com/blog/v3-8#%EF%B8%8F-nitro-v27) - chosing [ nuxi module add ]. + - [Nuxt docs](https://nuxt.com/docs/getting-started/installation#new-project) - choosing `npx nuxi-latest init learn.nuxt.com` . + - [Adding Modules](https://nuxt.com/blog/v3-8#%EF%B8%8F-nitro-v27) - chosing `nuxi module add `. - Adding, @vueuse/nuxt - Adding, @unocss/nuxt - Adding, @nuxt/content @@ -67,15 +67,15 @@ Along the way, Antfu shows how tests the success of the installs. - Begins with a uno.config.ts file under root directory. (Typescript should inteli-sense the options in your project.) - A TailwindCSS alternative with more customisation. - Presets: [] - examples provied: - - presetUno, the defaults (however does not restyle html elements, look to reset below) - - presetIcons, allows to use icons as attributes - - presetAttributify, allows direct writing of classes as attributes, with super powers. *** - - Within App.vue, add the [ import '@unocss/reset/tailwind'] to reset the html elements. (Allows your library to have greater consistency across a variety of browsers.) + - `presetUno`, the defaults (however does not restyle html elements, look to reset below) + - `presetIcons`, allows to use icons as attributes + - `presetAttributify`, allows direct writing of classes as attributes, with super powers. [* see below] + - Within App.vue, add the `import '@unocss/reset/tailwind'` to reset the html elements. (Allows your library to have greater consistency across a variety of browsers.) ### [Nuxt Color-mode](https://www.youtube.com/live/49WXr6kVBVI?si=dFctbP0EdW3_T415&t=1171) - Discussion: difference between nuxtjs/color-mode and vueUse, color-mode... the first is SSR compatible (as persists state via cookie that can be passed to server), helps with smarts behind hydration sent down the line. - Begin in script setup initialize a variable to useColorMode(). - - Actually, first also needs, nuxt.config.ts to have additon of [ colorMode: { classSuffix: '' } ]. + - Actually, first also needs, nuxt.config.ts to have additon of `colorMode: { classSuffix: '' }`. ### [ESLint Formatting](https://www.youtube.com/live/49WXr6kVBVI?si=nvIzUI1oTPAeaJt3&t=1579) - [ npx @antfu/eslint-config@latest ] - to install Antfu's eslint config. @@ -177,12 +177,12 @@ Loads up page... Reference the new Nuxt design scheme, see [here](https://nuxt.com/blog/new-website). - Start by loading background preset shortcuts found in uno.config.ts, 'bg-base' in this instance input hash, 'bg-[#020420]' - Discusses pros and cons of applying a bg to the layout. Antfu's pref is to apply within app.vue, under the html or body tag. In this way, is applied across all elements. - - If chose to use @apply (from TailwindCss) to append then shows how this is supported: need to enable this functionality in UnoCSS through 'transformers', by adding 'transformerDirectives()', which essentially a means to call in, 'special syntax inside HTML'. - - However, syntax highlighting of vscode disagrees with this direction, so Antfu shows another built-in way from UnoCSS, '--uno: bg-base' which keeps css prompting of editor in line with expectations. - - [Footnote: another exit door for @apply, is --at-apply, which also streamlines editor experience if you prefer.] + - If chose to use @apply (from TailwindCss) to append then shows how this is supported: need to enable this functionality in UnoCSS through 'transformers', by adding `transformerDirectives()`, which essentially a means to call in, 'special syntax inside HTML'. + - However, syntax highlighting of vscode disagrees with this direction, so Antfu shows another built-in way from UnoCSS, `--uno: bg-base` which keeps css prompting of editor in line with expectations. + - [*Footnote*: another exit door for @apply, is --at-apply, which also streamlines editor experience if you prefer.] - Lets consider font use: - Usual way is to download specified weights and scripts, however UnoCSS has a helper here too. - - Under presets, import then add presetWebFonts({}), which accepts an object to allow setup options. + - Under presets, import then add `presetWebFonts({})`, which accepts an object to allow setup options. - The two options discussed: provider and fonts. - Provide is usually 'google', but there are others see below. - The fonts, allows assigning the order of application to the preset 'defaults'. @@ -196,7 +196,7 @@ Reference the new Nuxt design scheme, see [here](https://nuxt.com/blog/new-websi Interesting asides (exploring the links provided): - [Font Bunny](https://bunny.net/fonts/) provide is a choice that prevents user tracking through adoption of font services. -- Nuxt Design upgrade, also implemented a ['Github Source Code']((https://nuxt.com/blog/new-website)) button, that allows you to quickly deepdive into the code being discussed in the documentation. +- Nuxt Design upgrade, also implemented a [`Github Source Code`]((https://nuxt.com/blog/new-website)) button, that allows you to quickly deepdive into the code being discussed in the documentation. Commit: [/ feat: align with nuxt.com design /](https://github.com/nuxt/learn.nuxt.com/commit/ebf7293625c23ce57fc3918125f079ef4ebdb801) @@ -210,14 +210,14 @@ Commit: [/ feat: align with nuxt.com design /](https://github.com/nuxt/learn.nux Footnotes & interesting asides (exploring the links provided): - UnoCSS Typography has a great set of [preset colors](https://unocss.dev/presets/typography#colors) that can be applied to make your fonts look professional. -- Also, has ability to introduce 'relative sizes' of e.g. p vs h1! +- Also, has ability to introduce 'relative sizes' of e.g. p relative to h1! Commit: [/ feat: integrate '@nuxt/content' /](https://github.com/nuxt/learn.nuxt.com/commit/b3b54c67f270a9e31be04bc5d53babd812ac0b2c) ## [0:43:42 Struggling with WebContainers](https://www.youtube.com/live/mDjI1uR-s-M?si=tdZBoCbLjp3aAhjG&t=2623) - Next, lets make the playground represent files from focused project in the playground: - - Within /templates/basic/app.vue - provide for a hello world, to update (instead of the slot) - works. + - Within `/templates/basic/app.vue` - provide for a hello world, to update (instead of the slot) - works. - Obvious, that currently outside 'color-mode' selection is not also updating internal playgroud (in sync), so lets consider that: - Rather than replicating 'color-mode' inside, consider css variable... ...? - The playground is in it's own iframe, so shows how $0 can access that element (ref found in dev tools by selecting in) - terminal also can access that by $0. @@ -239,7 +239,7 @@ Commit: [/ feat: support mounted nested folder to WC /](https://github.com/nuxt/ - Back to original problem, Nuxt representing in WebContainer... - Errors present, test by regressing Nitro to an earlier version, in case due to latest. - - Realize, with "overides" to specify the "nitropack" version, use "~2.7" not "^2.7" to prevent auto update. + - Realize, with "overides" to specify the "nitropack" version, use "*~*2.7" not "*^*2.7" to prevent auto update. - Next... explore a Stackblitz example booting a Nuxt preview instance. - Consider... HTTPS, for load setting for Nitro... implement. @@ -254,14 +254,14 @@ Footnote, interesting asides: - An old library that is still used for this is ['Splitpanes'](https://github.com/antoniandre/splitpanes) - Follows documentation for importing. - Styles added after the uno.css import, however not showing up... ... - - Decide to add a dedicated 'styles/overides.css' file to target and style the divider. + - Decide to add a dedicated `styles/overides.css` file to target and style the divider. - Notice, when dragging it, the grip of the mouse can lose the edge. To work around this, use point-event null. - The library contemplates this and has events of 'resize and resized' to allocate to 'start and end' respectively. - Then... conditionally add to the Playground (the listening component) not to listen to cursor event when isDragging. - Lets preserver the size of the window after resizing to prevent 'refresh' resetting the window. - Shows how to create your own limited type for a variable after investigating the output from the library. - Apply the width % to leftSize variable created. - - Shows best practice to 'persist this value' with useLocalStorage() function from Nuxt, with a key and deafault. + - Shows best practice to 'persist this value' with `useLocalStorage()` function from Nuxt, with a key and deafault. - Consider if need animation to assist UX, decide not, so remove it from the styled feature. - Next... apply similar styling to the horizontal dividers. - NOTE: we could repeat the 'isDragging' for his component as well, however Antfu instead shows how to extract it as a composable, within a state.ts file. @@ -278,7 +278,7 @@ General chat: Mostly talking about the tooling described in [Github, Antfu Use Page](https://github.com/antfu/use). - Re. Presets for UnoCSS, yes could autoimport the lot, however like also to allow people to consider and choose what they are using for each project. - Discussed preferences of various settings in VSCode. -- Generally speaking, I use CMD pallette for the general dictionary of shortcuts vs setting specific keyboard shortcuts. +- Generally speaking, Antfu uses CMD pallette for the general dictionary of shortcuts vs setting specific keyboard shortcuts. - Antfu uses eslint for linting and formatting and describes why [here](https://antfu.me/posts/why-not-prettier). Essentially, allows line by line control over how things are handled (with highlevel options). ### From the audience: @@ -288,8 +288,8 @@ Mostly talking about the tooling described in [Github, Antfu Use Page](https://g Deeper dive topics: ### Eslint settings for wrapping of lists: -- Eslint, customized his own prettier formatting preference re. first items:: - - Can change the arrangement 'all on one line' vs 'vertical list' of items, but setting preference on the first item. +- Eslint, customized his own prettier formatting preference re. first items: + - Can change the arrangement 'all on one line' vs 'vertical list' of items, by setting preference on the first item. - Look for rule drafting in ['consistent-list-newline'](https://github.com/antfu/eslint-plugin-antfu/blob/main/src/rules/consistent-list-newline.md) ### Searching existing alternate code bases, while in flow: @@ -301,8 +301,10 @@ Deeper dive topics: ### [.zshrc](https://github.com/antfu/dotfiles/blob/main/.zshrc) - Highlights a long list of aliases, within zsh, for node use. -- Simplified the 'standard call' by also simplifying the call to nr, which auto-selects the right package manager. +- Simplified the 'standard call' by also simplifying the call to [ni](https://github.com/antfu/ni), which auto-selects the right package manager. - (Notice, all aliases are simply one letter or so). + +### More on Antfu's workflow - Hub (hub.github.com) vs cli.github.com discussion. - Clonei ... use i (for my code master folder) or f (for forked code master) - clonei thus, puts the code in the right place from whereever I am (and open it) @@ -312,7 +314,7 @@ Deeper dive topics: ### Reviewing code hacks...(NH) Piecing together of the above... having loaded the target projects in the various folders, Antfu: -- pr function, with the number... when inside the repo, opens the PR in the code editor. +- pr function, with the number (for the pull request ticket)... when inside the repo, opens the PR in the code editor. - then 'main' to get back out. @@ -332,7 +334,7 @@ This code is found in merging of Issue 12 and 13, [here](https://github.com/nuxt ## [0:16:07 Merged PRs catch up](https://www.youtube.com/live/B7JJP-vgImM?si=8ayPREGERa-gFCVy&t=986) Discuss other merged PRs, first up discussing community contributions: -- Local Cookie: switched, from useLocalStorage('nuxt-playground-panel-left') to a usePanelCookie (composable...) details [here](https://github.com/nuxt/learn.nuxt.com/pull/14). +- Local Cookie: switched, from `useLocalStorage('nuxt-playground-panel-left')` to a `usePanelCookie (composable...)` details [here](https://github.com/nuxt/learn.nuxt.com/pull/14). - Npmrc: import.meta.glob, doesn't include .* files explicitly, [so consider adding](https://github.com/nuxt/learn.nuxt.com/pull/11)? (Antfu will revisit later). - Switch Color Styling: considered [dynamic styling](https://github.com/nuxt/learn.nuxt.com/pull/17) for change of color-mode. Antfu decides doesn't fit current use case, but good demonstration of code so calling it out, in case useful for others. - Panel sizing: avoiding a bug if one panel is resized to 0, [here](https://github.com/nuxt/learn.nuxt.com/pull/18). @@ -352,16 +354,16 @@ See [here](https://github.com/nuxt/learn.nuxt.com/pull/21) for that PR merger. ## [0:35:41 Refactor components](https://www.youtube.com/live/B7JJP-vgImM?si=uVrJ2H991P-_8Q5c&t=2142) Lets revisit the .client component: - Antfu notes because the preview pane is rendering client only, there is a noticeable delay in the rendering of the page. -- Considering a different approaches, with a component: +- Considering a different approaches, with a `` component: i. Pulling the 'initialization' of the panes on RHS to be later, while the painting of the blocks are prepared earlier. ii. Pulling logic from the component, to allow more easily understanding what is going on. -- Interesting turn, is that shares state object (:stream="stream") from the preview into the terminal pane... so consider options for that: - - One way is again, falling back to useState() composable as part of a new function for the purpose of sharing (such as e.g. useTermianStream), however this feels a temporary fix, so in instead [*reaching for Pinia*](https://www.youtube.com/live/B7JJP-vgImM?si=0HDyemEOq9bnxLUt&t=2591). +- Interesting turn, is that `` shares state object (:stream="stream") from the preview into the terminal pane... so consider options for that: + - One way is again, falling back to `useState()` composable as part of a new function for the purpose of sharing (such as e.g. useTermianStream), however this feels a temporary fix, so in instead [*reaching for Pinia*](https://www.youtube.com/live/B7JJP-vgImM?si=0HDyemEOq9bnxLUt&t=2591). - Putting finer control to size of panes, noting horizontal spacing and vertical spacing are independent, create two different values to track. - Thus Antfu, shows how .client render the components still relevant, however the server now provides the content to hydrate within these components. - Showing how the hydration is having difficulty finding the parent element. - - Try various ways of linking to element and resolve by using nextTick(). - - Perhaps a better way is for a watch() component that stops after the element has appear. + - Try various ways of linking to element and resolve by using `nextTick()`. + - Perhaps a better way is for a `watch()` component that stops after the element has appear. Next, lets also want the server boot logic to be in its own composable... lets pause and consider all our todos currently. @@ -375,33 +377,33 @@ Next, lets also want the server boot logic to be in its own composable... lets p ## [1:06:15 Virtual File Structure](https://www.youtube.com/live/B7JJP-vgImM?si=ciEFzvFG0dUn3i6f&t=3979) OK... so lets do the refactor of the composable and hook up basic editing in the webcontainer: -- Focus, on [ startDevServer() ], placing within playground.ts. -- Consider if functions are flat, async or mounted within . +- Focus, on `startDevServer()`, placing within playground.ts. +- Consider if functions are flat, async or mounted within ``. Commit: [/ refactor: moving and dividing some parts /](https://github.com/nuxt/learn.nuxt.com/commit/7daf1fed3c788a6dc174127f1b732be5b0354a3b?diff=unified&w=0) [Next](https://www.youtube.com/live/B7JJP-vgImM?si=C7C8LSEmkIdrlt5t&t=4686)... lets consider the file we are writing to, it might be any of a number, so lets consider a virtual file system: - First up, imagining a class File, with all the components. - Detailed outline of the type and file structure of the files now considered. - - Key: made as a function loadFiles(), so that can load multiple times without mutating it. + - Key: made as a function `loadFiles()`, so that can load multiple times without mutating it. - Or... could also make reactive... with a getter() in the File...? -[Footnote](https://www.youtube.com/live/B7JJP-vgImM?si=0lDMB38kjCz4qE2J&t=5292): types were not 'reading in vscode descriptions' through the project, so updated nuxt.config.js to enable it so that it could. +[*Footnote*](https://www.youtube.com/live/B7JJP-vgImM?si=0lDMB38kjCz4qE2J&t=5292): types were not 'reading in vscode descriptions' through the project, so updated nuxt.config.js to enable it so that it could. ## [1:44:00 Explain Vue reactivity unwraps](https://www.youtube.com/live/B7JJP-vgImM?si=6aY3gTjk3u97bFL6&t=3980) -[* Real world example of ref v. Reference v. shallowRef, with explanation *]() +* Real world example of ref v. Reference v. shallowRef, with explanation * - Note: to access a ref, which is nested, this value isn't unwrapped automatically, so need to use .value to access it. -- Considered using reactive() instead, which then discards use of .value as is automatically unwrapped. +- Considered using `reactive()` instead, which then discards use of .value as is automatically unwrapped. -- Noting that, however using useState with nested values we ran into roadblocks. Antfu explains with the Vue SFC playground the issues at play. -- Solution: can markRaw({}) the object in order to avoid useState getting too handson with trying to assist us with a solution. +- Noting that, however using useState with nested values we ran into roadblocks. Antfu explains with the Vue SFC playground the issues at play as a 101 on the background on Vue's reactivity system. +- Solution: can `markRaw({})` the object in order to avoid useState getting too handson with trying to assist us with a solution. ## [1:58:40 Basic Editor and HMR](https://www.youtube.com/live/B7JJP-vgImM?si=ctrpHptzFY_2rHoq&t=7123) -Consider props and defineProps, to pass in the file to be used in the editor. -- In this instance to pass in the files selected, why not instead start with defaults? Antfu shows, props = withDefaults pattern. +Consider props and `defineProps`, to pass in the file to be used in the editor. +- In this instance to pass in the files selected, why not instead start with defaults? Antfu shows, `props = withDefaults` pattern. - Demonstrates simple presentation of files with a preview pane. -- (of-auto, shortcut for overflow-auto in the viewport) -- Next, shows how can throttledWatch the files for changes - from VueUse. +- Footnote: `of-auto` is a shortcut for overflow-auto in the viewport. +- Next, shows how can `throttledWatch` the files for changes - from VueUse. - Demonstrates, 'text-primary' highlighting of current file, with the simple presets of UnoCSS set up in earlier classes. Commit: [/ feat: introduce File structure and add basic editor /](https://github.com/nuxt/learn.nuxt.com/commit/0d1bc13e4aef14a0967763c1d6671e17caa09298) @@ -410,7 +412,7 @@ Commit: [/ feat: introduce File structure and add basic editor /](https://github Antfu runs through the syntax of various ways of declaring Props. ## [2:25:00 Refactor to Pinia](https://www.youtube.com/live/B7JJP-vgImM?si=kMmfgBgh07iL_rX4&t=8702) -Antfu gets on a march and explains the excitement of working through a clear list of todos for a new project. (Getting the mix just right between not too easy, not too hot), +Antfu gets on a march and explains the excitement of working through a clear list of todos for a new project. (Getting the mix just right between not too easy, not too hard). - Setting up Pinia, noting... Antfu, has never used it before, so learning along with us. - A good opportunity to show the Nuxt Devtool setup. Devtools allows a GUI for finding module and installing. The install process also forecasts what changes will be made. - However, cross origin policies blocked the install, so reverted to '*' accepting all origins. @@ -419,20 +421,21 @@ Antfu gets on a march and explains the excitement of working through a clear lis Bug: identify cross-origin headers need to be specifically specified for the webcontainer, however this appears to be at odds with allowing devtools to work. (Will park and come back to this). ###*Pinia* +[Pinia Docs Here](https://pinia.vuejs.org/) - Antfu, starts by playing around to experiment on how the store is initiated if called in components on the web or client. -- Considers moving the usePlayground into the store and then typing the environments. -- My utilising the mount() function on the client side, that also provides some simplification between concerns re. server vs client. +- Considers moving the `usePlayground` into the store and then typing the environments. +- My utilising the `mount()` function on the client side, that also provides some simplification between concerns re. server vs client. -Antfu's thinking, 'Pinia, helps share state while bing SSR friendly'. +Antfu's thinking, 'Pinia, helps share state while being SSR friendly'. -Next let's consider the individual ui elements, some make sense to simply implement in state (such as isPanelDragging), whereas the individual values of the panel sizes would be better passed together. +Next let's consider the individual ui elements, some make sense to simply implement in state (such as `isPanelDragging`), whereas the individual values of the panel sizes would be better passed together. - Looked at creating own {}, including Json.stringify to create own inputs, however -- Discovered Nuxt's composable useCookie automatically serializes and deserialize, docs revealed [here](https://nuxt.com/docs/api/composables/use-cookie). +- Discovered Nuxt's composable `useCookie` automatically serializes and deserialize, docs revealed [here](https://nuxt.com/docs/api/composables/use-cookie). - Antfu showed the 'traditional way' pre-Nuxt, then simplifies the code to rely on Nuxt's built in composables, which simplifies the approach a lot. Commit: [/ feat: refactor using pinia /](https://github.com/nuxt/learn.nuxt.com/commit/9913b51d47dedfe6c0681568e309aa02b24020a4) -Observation: the mount() is in the store, however we only want to call and operate this once... ... so lets move it to the webcontainer. Antfu - shows refactor on this. +Observation: the `mount()` is in the store, however we only want to call and operate this once... ... so lets move it to the webcontainer. Antfu - shows refactor on this. Qu: why useCookie over useLocalStorage? Ans: because we want the opportunity of the state to come from the server.