DEV Community

Cover image for Neovim changed my perspective

Neovim changed my perspective

Jonny on February 20, 2024

How deep down do I want to explore? A thought I ponder, neck-deep in a project trying to use Web Components instead of React. Is it worth it? I th...
Read full post
Collapse
 
hendrikras profile image
Hendrik Ras •

Haven't tried neoVim. But will give it a try. For me the power of vim is recording macro's. Whenever I have to do a repetitive edit like converting csv to json. I switch to vim. But the lack of plugins keep me from using it as my day to day editor. Perhaps neoVim will change that.

Collapse
 
jdtoombs profile image
Jonny •

Neovim has a great plugin ecosystem!

Collapse
 
pengeszikra profile image
Peter Vivo •

Hi which Neovim variant are you using. I also started to work with Neovim: LazyVim, which is quite enoug good build. I can select on my workplace to choose VDI enviroment: linux or windows. My favorite was MacOS so I jump to the linux. I get some experience the vim, and now I use nvim is second editor. Already I work much faster with VS Code. But nvim / vim is close to terminal and fare better for cross repo using.

Collapse
 
jdtoombs profile image
Jonny •

Hey! I'm using a custom config with Packer as my plugin manager. I have heard good things about LazyVim!

I also like how nvim is part of the terminal, makes it very quick and easy for navigating through directories and editing files. Not having to open an additional external application is nice :)

Collapse
 
marco_43 profile image
Marco •

Hey Jonny, I like your article. I was discovering Vim and Neovim not long ago, too. It was a very thriving experience, but I switched back to VS Code / Jetbrains with Vim Movement activated (but today, I also switched back to "classic" editor behavior with mouse and keyboard). For me I have learned, that using the mouse not always cost time, but give me some space to do small thinking-tasks, like "hmm... where will i put my component? *click *click, maybe here? *click..." But I understand the point for speed when you do bare coding stuff.

I have a question on your web component journey: I have a similar project to, where I would use web components as "plugins". The biggest pain point is the interface between parent and child components. Not simple attributes like strings or numbers, but complex objects, which I will pass down to the child web component. (or functions for callbacks for example). The only way I discovered so far are CustomEvents, but it feels a bit monkey patched.. Do you have any ideas about that?

Collapse
 
jdtoombs profile image
Jonny • • Edited

Hey Marco, sounds like you've got a good balance of what works for you :)

You may have already tried this but I directly set the properties on instances of my child component.

For example:

// Parent Component
const child = document.querySelector('child');

child.yourProperty = { key: 'value' };
Enter fullscreen mode Exit fullscreen mode

And of course we would need the getters, and setters for yourProperty

class Child extends HTMLElement {
  constructor() {
    super();
    this._yourProperty = {};
  }

  get yourProperty() {
    return this._yourProperty;
  }

  set yourProperty(val) {
    this._yourProperty = val;
    // must trigger re-render to reflect this change
    this.onPropertyChanged();
  }

  onPropertyChange() {
    this.render();
  }

  render() {
    this.textContent = `${JSON.stringify(this._yourProperty)}`
  }
}
customElements.define('child', Child);
Enter fullscreen mode Exit fullscreen mode

Hopefully this is of some help!

Collapse
 
marco_43 profile image
Marco •

hmm, I thought I had tried that, but I will give this way another shot. Thanks for the example :-)

Collapse
 
efpage profile image
Eckehard • • Edited

Regarding your experience with ShadowDom you might find that the whole system of HTML/CSS/JS has some conceptual issues. One of them is the lack of local definitions, that apply only to a specific context. ShadowDom is kind of a workaround, but not a real solution. Svelte solves this better allowing CSS rules to be local to the module, but we hope in the future we will see more flexible scoping in CSS.

HTML in JS solutions are not very popular these days, but one advantage is the fine grained scoping you get with JS. Your button example could be much more compact using a HTML in JS approach (look here or here for more information):

let out, count = 0
let txt = () => `You clicked the button ${count} times.`

begin(div("", "padding: 10px; background-color: #f0f0f0; border-radius: 5px; display: inline-block;"+_box))
{
  out = p(txt());
  button("Click me", "margin-top: 10px;").onclick = () => {
    count++
    out.textContent = txt()
  }
}
end()
Enter fullscreen mode Exit fullscreen mode

A running example is here

It will depend much on your task which approach serves best, but it is not necessary the one that "everybody" uses!

Collapse
 
jdtoombs profile image
Jonny •

Thanks for this, haven't seen this before! Going to try it out :)

Collapse
 
zeddnyx profile image
Zeddnyx •

I use nvim since first learn programming lol, and here my custom config for webdev especially nextjs, ts etc Znvim

Collapse
 
jdtoombs profile image
Jonny •

Ooo I will take a look :) - thanks for sharing!