t9md/vc2017.md

## vc2017.md

      
    Raw
  

              vc2017.md
            
          
    I'm t9md


My editor history: Vim > Emacs > Vim > Atom
Emacs's limitless extensibility plant never give up sprit to me and it also made me editor addict.
Vim plugins: choosewin, qickhl, smalls, textmanip, vim-chef, and more
Atom packages: vim-mode-plus, narrow, quick-highlight, cursor-history, and more..(over 30 pkgs!).

Are you familiar with this endless editor tuning loop?.

Frustration > Yes I can improve it > Ya I did it!! Oh, I found another frustration point > oh, I've spent too much hours!.


What is the vim-mode-plus(VMP)?


It's Atom editor package which provides vim keybinding and plus more.
This is fork of vim-mode created by GitHub , they now deprecated it in favor of vmp.


Version
Date
Event


v0.0.0
2015-08-01
fork GitHub's vim-mode


v0.1.1
2015-09-28
1st public


v1.13.0
2017-10-27
185th release in 818 days (2 years + 3 months)


AVG. 1 release / 4.5 days !!
I'm still keeping high pace release cycle as first year of vmp.


Who use vmp?


Jordan Walke(ReactJS, ReasonML)

https://twitter.com/jordwalke/status/911889758208499712


Cheng Lou(ReactMotions, ReasonML)

https://twitter.com/_chenglou/status/903159866172235776


Richard Feldman(Elm book author, evangelist)
Kent C Todd(Author of lots of npm modules and more).

https://twitter.com/kentcdodds/status/898888597465477123


Michael Jackson(React Router, React Training)

https://twitter.com/mjackson/status/913551031656636416


Ryan Florence(React Router, React Training)

https://twitter.com/ryanflorence/status/918346908225085440


Some says vmp is the best vim emulator.
IMO, maybe it's because of precise cursor placement.(e.g. cursor placement after undo or redo operation).


What I will talk today

Part1. Understand editing in Vim


What is editing in Vim
How it's implemented and executed
What is Motion, TextObject and Operator

Part2. vmp's unique features


UX improvement
Cursor placement
One key TextObject
Occurrence


Part1. Understand editing in Vim


What is editing in Vim?


Why can your j keystroke move-down cursors


Operation's life in stack on operationStack


Motion, TextObject, Operator

Motion: j, k, {, g g...


Move cursor from here to there.
When used as TARGET, select here-to-there.

TextObject: i p, i w, a W...


Select text range, always used as TARGET.
Select same range as long as cursor is within that range

i w select same word as long as cursor is within that word.


Operator: d, c, y...


Mutate TARGET
Always require TARGET. "I will wait until I get target!".


Summary

Editing is to transform text by mutation.

You build mutation instruction through keystroke.

Each keystroke invoke one of Operator, Motion or TextObject.

Formula: Mutation = Operator + Target(= Motion or TextObject)


Part2. VMP's unique features


:camera_with_flash: DEMO session


Select operator
TransformString operators
Edge motion
Occurrence
Persistent selection
Practical use of occurrence etc...


Flash target 🔦


💡 vmp flashes an operator's target and also flashes changes on undo, redo.
When you type y i p, it flashes i p range with CSS keyframe animation.
With flash, you can be more confident for your operation.


UI feedback on surround


💡 Surround is difficult for me.


Because I have to type many keystrokes without mistake, without any UI feedback.

y s i w (: surround(y s) inner-word(i w) with (.


vmp gives proper UI feedback to make surround easy to use, easy to understand

Select target immediately after target was provide(i w) and before you input final surround-char.
When change-surround, it shows char will be change at hover indicator.


This GIF is after you type c s " and before you input final '


Tunable f behavior and flash find-char.


💡 f is difficult. Where to stop next?.
With flashing finding-char, you can predict where to stop next.
💡 I like all vim-seek, clever-f and vim-sneak, I want all of it's goodness.

Make it configurable to find across lines, number of chars to find, auto confirm by timeout, reuse f as ;...
You can tune vmp's f as you like.


Eliminate unwanted cursor move


💡 What if cursor is not moved after y i p?

In pure-Vim, cursor is moved to start of paragraph.


IMO, moving cursor after operator is unwanted side-effect.
🎁 vmp introduces various stayOnXXX configuration and all have enabled by default.

In pure-Vim, stayOnVerticalMotion + stayOnDelete is doable by :set startofline=false


stayOnXXX configurations


Keep cursor positions after operator y i p, d d, g U i p..

stayOnTransformString, stayOnYank, stayOnDelete, stayOnOccurrence


Keep column when selecting TextObject v i p, v i i..

stayOnSelectTextObject


keep column on vertical motion g g, G...

stayOnVerticalMotion


One-key for VIP(Very ImPortant) TextObject


🎁 You can type y p instead of y i p. How many times have you ever typed i p in your life!?
🎉 Why? Some keys are freely available in operator-pending-mode.
❓ Since Operator is waiting for Target(Motion or TextObject) only. Remember Operator + Target rule?.
🔎 So Operator + Operator keystroke(y d, d p...) makes no sense, OK to re-map.

⚠️ One exception, same-operator-twice(d d, y y...) keystrokes have special meaning.


Occurrence


💡 Noticed patterns in coding. I'm repeating same operation on same keyword again and again.
🎁 With occurrence, you can bulk apply operator to all occurrences of keyword within target.
You can edit more declaratively than imperatively, also can reduces need of . repeat.


Occurrence: How it works


Occurrence is not difficult, technically it's marker edit


Mark keyword under cursor then edit as in normal way.
You can mark keyword by either of following way

operator-modifier: o(word) and O(subword).(e.g. d o p, c O z)
preset-occurrence command: g o and g O. I'm remapping to m and M locally.


Mark keyword by g o or g O(subword)
Select visually
c to change, I to insert at start A to append to end of occurrence.


🔰 Advice to improve vim-skill


🎓 Understand this formula. Editing = Operator + Target(Motion or TextObject).

📢 Install Operator + Target mental model into your brain by shouting loudly while typing.
y("Operator"!!) i p("Target!!")


📈 Pick and master from high-return Motion, TextObject first.

Motion: g g, G, [, ](VMP only)
TextObjet: i p, i w, i z(VMP only), i ,(VMP only)


🍚 Use it in daily editing.


🎹 Repeat, repeat, repeat! Till your finger moves without THINKING.

Vim: y i p, y i p, y i p... c i p, c i p... d i p...
Vim: y i ,, y i ,, y i ,... c i ,, c i ,... d i ,...
vmp shorthand: y p, y p, y p... c p, c p... d p...
vmp shorthand: y ,, y ,, y ,... c ,, c ,... d ,...


💉 Gradually increase TextObject, Motion of daily use.


👋: VMP is the most ambitious vim emulator in the world(IMO!).


🎁 Bundled so many non-default Motion, TextObject, Operator.
🎁 Introduces new editing concept: e.g. occurrence, persistent-selection.
❤️ UX improvement to make Vim easy to use, easy to understand.
💣 vmp is NOT aiming to become a perfect Vim emulator(no interest!).
👻 My mental stance is just borrowing favorite Vim features.
💡 Motivation is to experiment what-if ideas with hackable editor(Atom!).
💀 Ideas comes from frustration I encounter in daily vmp-dev. Endless feedback loop!
I'm really SERIOUS for vmp, but vmp is NOT STRICT.

This GIF is now removed "show operator representing emoji" feature. You see how vmp is NOT strict?


🙇 Thank you!!! 🙇


## vmpDemo.js
// NOTE: Make sure folowing "prettier-atom" option in `config.cson`.
// "prettier-atom":
//   prettierOptions:
//     printWidth: 80

class DemoClass {
  miscFeatures() {
    // [TODO] Demonstrate following unique features

    // - vmp flashs TARGET on `y i p` and also flashes changes on undo and redo
    // - vmp add UI feedback for surround.
    // - vmp doesn't move cursor on `y i p`
    // - vmp keep column on `v i p`

    // - vmp's `f` is tunable to flash, to find-across-lines, to find two or more chars.
    // - vmp can maximize pane by `cmd-enter`
    // - vmp can `smoothScroll` by `ctrl-f,b,d,u`, `ctrl-y,e`, `z z`, `z t`, `z u`(vmp unique)

    // - vmp allow you to type `y p` instead of `y i p`. one-key for VIP TextObject in operator-pending-mode
    //   - Available by default
    //     - `y p` = `y i p`
    //     - `y z` = `y a z`(a-fold)
    //     - `y c` = `y i w`
    //     - `y C` = `y i W`
    //     - `y d` = `y i d`(subword)
    //   - Custom keymap in my local keymap.cson
    //     - `y u` = `y i i`(indent)
    //     - `y ;` = `y i s`(inner-any-pair)
    //     - `y m` = `y a s`(a-any-pair)
  }

  moveToEdgeMotion() {
    // `move-down-to-edge`, `move-up-to-edge` is like `j`, `k`, but stops at edge only.
    // If next-lines column was blank, it's edge. Since you will fall if you go further.
    // [TODO] Cursor is at `three`, delete `3:` to `6:`.
    // [TODO] Cursor is at `three`, delete `very long` member only.
    const list = [
      "1: one",
      "2: two",
      "3: three very long",
      "4: four very long",
      "5: five very long",
      "6: six",
    ]
  }

  // You can create `persistent-selection` by `cmd-enter`.
  // persistent-selection is "dead" selection, you can revive afterwards to treat it as target.
  // [TODO] Change `---..` to `xxx...` but only for index at 0, 3, 5.
  persistentSelectionAndSelectOperator(one, two, three) {
    const array = [
      "0: ----------", // this!
      "1: ----------",
      "2: ----------",
      "3: ----------", // this!
      "4: ----------",
      "5: ----------", // this!
    ]
  }

  // [TODO] Introduce occurrence
  // With occurrence, you can bulk apply operator on all keywords appears in TARGET.
  //  - `c a f`: change a-function
  //    - [Normal operation] apply operator to target
  //  - `c o f`(g o c f): change occurrence in a-function
  //    - [Occurrence operation]: apply operator to occurrence in target
  // [TODO] Remove temporal "element" variable, so you must replace all `element` to `this.element`.
  update(mode, submode) {
    const {element} = this
    element.className = `${SCOPE}-${mode}`
    switch (settings.get("statusBarModeStringStyle")) {

      case "short":
        element.textContent = (mode[0] + (submode ? submode[0] : "")
        ).toUpperCase()
        return
      case "long":
        element.textContent =
          LongModeStringTable[mode + (submode ? `.${submode}` : "")]
        return
    }
  }

  // [TODO] Rename `klassOrName` to `klass`
  // [TODO] Rename `instance` to `object`
  static getInstance(vimState, klassOrName, properties) {
    const klass =
      typeof klassOrName === "function"
        ? klassOrName
        : Base.getClass(klassOrName)
    const instance = new klass(vimState)
    if (properties) Object.assign(instance, properties)
    instance.initialize()
    return instance
  }

  // [TODO]: Unwrap `Array.from(...)` guard. In other words, convert `Array.from(exp)` to bare `exp`.
  codeFragmentsForS3() {
    const [startRow, endRow] = Array.from([range.start.row, range.end.row])  // from this
    // const [startRow, endRow] = [range.start.row, range.end.row] // to this

    // [TODO] inline amountOfPadding (= remove use of temporal `amountOfPadding` variable)
    const newRows = rows.map((rowText, i) => {
      i++
      const amountOfPadding = limitNumber(lastRowWidth - i.length, {
        min: 0,
        max: 5,
      }) // extra comment
      return " ".repeat(amountOfPadding) + `${i}:${rowText}`
    })
  }

  // [TODO] Remove `Point` suffix from all identifiers in `isEdgePoint` and `isStoppablePoint` methods.
  //   E.g `isStoppablePoint` to `isStoppable`.
  // [TODO] Inline `above`, `below`, `left`, `right` temporal variable
  isEdgePoint(point) {
    const abovePoint = point.translate([-1, 0])
    const belowPoint = point.translate([+1, 0])

    return (
      this.isStoppablePoint(point) &&
      (!this.isStoppablePoint(abovePoint) || !this.isStoppablePoint(belowPoint))
    )
  }

  isStoppablePoint(point) {
    const leftPoint = point.translate([0, -1])
    const rightPoint = point.translate([0, +1])

    return (
      this.isNonWhiteSpacePoint(point) ||
      this.isFirstRowOrLastRowAndStoppable(point) ||
      (this.isNonWhiteSpacePoint(leftPoint) &&
        this.isNonWhiteSpacePoint(rightPoint))
    )
  }

  occurrenceIsEverywhereV1(range) {
    // [TODO]: Define endPosition at __HERE__
    const startPosition = range.start
    // __HERE__
    this.callSomeFunction({startPosition, endPosition})
  }

  occurrenceIsEverywhereV2(range) {
    // <snip>
    // [TODO]: Define foldInfo.maxIndent at __HERE__
    foldInfo.minIndent = Math.min(
      foldInfo.minIndent != null ? foldInfo.minIndent : indent,
      indent
    )
    // __HERE__
  }

  // [TODO]: Comment out multiple `console.log` in function.
  // [TODO]: Delete `console.log` included line?
  consolLogScatteredForDebugPurpose(kind, rowRangeWithIndent) {
    if (!foldInfoByKind[kind]) {
      console.log(foldInfoByKind)
      foldInfoByKind[kind] = {rowRangesWithIndent: []}
      console.log(foldInfoByKind[kind])
    }
    const foldInfo = foldInfoByKind[kind]
    console.log(foldInfo)
    foldInfo.rowRangesWithIndent.push(rowRangeWithIndent)
    const {indent} = rowRangeWithIndent
    console.log(indent)
    foldInfo.minIndent = Math.min(
      foldInfo.minIndent != null ? foldInfo.minIndent : indent,
      indent
    )
    foldInfo.maxIndent = Math.max(
      foldInfo.maxIndent != null ? foldInfo.maxIndent : indent,
      indent
    )
    console.log(foldInfo)
  }

  alignOccurrenceOperator() {
    // [TODO] format following TWO table maually by `align` operator

    // | where| move to 1st char | no move |
    // |-|-|-|
    // | top | `z enter` | `z t` |
    // | middle | `z .` | `z z` |
    // | bottom | `z -` | `z b` |

    // [TODO] Align member of arrray `one`, `two`, `three` by `textC` keyword.
    // prettier-ignore
    const one = [
      {action: "set", textC: "|    A    ab    a    Ab    a"},
      {action: "ensure", key: "f A", textC: "    |A    ab    a    Ab    a"},
      {action: "ensure", key: "f A", textC: "    A    ab    a    |Ab    a"},
      {action: "ensure", key: ",", textC: "    |A    ab    a    Ab    a"},
      {action: "ensure", key: ";", textC: "    A    ab    a    |Ab    a"},
    ]

    // prettier-ignore
    const two = [
      {action: "set", textC: "|    a    ab    a    cd    a"},
      {action: "ensure", key: "f a enter", textC: "    |a    ab    a    cd    a"},
      {action: "ensure", key: "f c enter", textC: "    a    ab    a    |cd    a"},
    ]

    // prettier-ignore
    const three = [
      {action: "set", textC: "|    a    ab    a    cd    a"},
      {action: "ensure", key: "f a", textC: "|    a    ab    a    cd    a"},
      {action: "ensure", textC: "    |a    ab    a    cd    a"},
      {action: "ensure", key: "f c d", textC: "    a    ab    a    |cd    a"},
      {action: "ensure", key: "f a", textC: "    a    ab    a    |cd    a"},
      {action: "ensure", textC: "    a    ab    a    cd    |a"},
      {action: "ensure", key: "F b", textC: "    a    ab    a    cd    |a"},
      {action: "ensure", textC: "    a    a|b    a    cd    a"},
    ]
  }
}
// [TODO] Add number to all TODO in this file like TODO:1, TODO:2

// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// Oh! You have reached enlightenment of vmp!
// Do extra TODO to delete all TODOs in this file
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Version	Date	Event
v0.0.0	2015-08-01	fork GitHub's vim-mode
v0.1.1	2015-09-28	1st public
v1.13.0	2017-10-27	185th release in 818 days (2 years + 3 months)
	// NOTE: Make sure folowing "prettier-atom" option in `config.cson`.
	// "prettier-atom":
	// prettierOptions:
	// printWidth: 80

	class DemoClass {
	miscFeatures() {
	// [TODO] Demonstrate following unique features

	// - vmp flashs TARGET on `y i p` and also flashes changes on undo and redo
	// - vmp add UI feedback for surround.
	// - vmp doesn't move cursor on `y i p`
	// - vmp keep column on `v i p`

	// - vmp's `f` is tunable to flash, to find-across-lines, to find two or more chars.
	// - vmp can maximize pane by `cmd-enter`
	// - vmp can `smoothScroll` by `ctrl-f,b,d,u`, `ctrl-y,e`, `z z`, `z t`, `z u`(vmp unique)

	// - vmp allow you to type `y p` instead of `y i p`. one-key for VIP TextObject in operator-pending-mode
	// - Available by default
	// - `y p` = `y i p`
	// - `y z` = `y a z`(a-fold)
	// - `y c` = `y i w`
	// - `y C` = `y i W`
	// - `y d` = `y i d`(subword)
	// - Custom keymap in my local keymap.cson
	// - `y u` = `y i i`(indent)
	// - `y ;` = `y i s`(inner-any-pair)
	// - `y m` = `y a s`(a-any-pair)
	}

	moveToEdgeMotion() {
	// `move-down-to-edge`, `move-up-to-edge` is like `j`, `k`, but stops at edge only.
	// If next-lines column was blank, it's edge. Since you will fall if you go further.
	// [TODO] Cursor is at `three`, delete `3:` to `6:`.
	// [TODO] Cursor is at `three`, delete `very long` member only.
	const list = [
	"1: one",
	"2: two",
	"3: three very long",
	"4: four very long",
	"5: five very long",
	"6: six",
	]
	}

	// You can create `persistent-selection` by `cmd-enter`.
	// persistent-selection is "dead" selection, you can revive afterwards to treat it as target.
	// [TODO] Change `---..` to `xxx...` but only for index at 0, 3, 5.
	persistentSelectionAndSelectOperator(one, two, three) {
	const array = [
	"0: ----------", // this!
	"1: ----------",
	"2: ----------",
	"3: ----------", // this!
	"4: ----------",
	"5: ----------", // this!
	]
	}

	// [TODO] Introduce occurrence
	// With occurrence, you can bulk apply operator on all keywords appears in TARGET.
	// - `c a f`: change a-function
	// - [Normal operation] apply operator to target
	// - `c o f`(g o c f): change occurrence in a-function
	// - [Occurrence operation]: apply operator to occurrence in target
	// [TODO] Remove temporal "element" variable, so you must replace all `element` to `this.element`.
	update(mode, submode) {
	const {element} = this
	element.className = `${SCOPE}-${mode}`
	switch (settings.get("statusBarModeStringStyle")) {

	case "short":
	element.textContent = (mode[0] + (submode ? submode[0] : "")
	).toUpperCase()
	return
	case "long":
	element.textContent =
	LongModeStringTable[mode + (submode ? `.${submode}` : "")]
	return
	}
	}

	// [TODO] Rename `klassOrName` to `klass`
	// [TODO] Rename `instance` to `object`
	static getInstance(vimState, klassOrName, properties) {
	const klass =
	typeof klassOrName === "function"
	? klassOrName
	: Base.getClass(klassOrName)
	const instance = new klass(vimState)
	if (properties) Object.assign(instance, properties)
	instance.initialize()
	return instance
	}

	// [TODO]: Unwrap `Array.from(...)` guard. In other words, convert `Array.from(exp)` to bare `exp`.
	codeFragmentsForS3() {
	const [startRow, endRow] = Array.from([range.start.row, range.end.row]) // from this
	// const [startRow, endRow] = [range.start.row, range.end.row] // to this

	// [TODO] inline amountOfPadding (= remove use of temporal `amountOfPadding` variable)
	const newRows = rows.map((rowText, i) => {
	i++
	const amountOfPadding = limitNumber(lastRowWidth - i.length, {
	min: 0,
	max: 5,
	}) // extra comment
	return " ".repeat(amountOfPadding) + `${i}:${rowText}`
	})
	}

	// [TODO] Remove `Point` suffix from all identifiers in `isEdgePoint` and `isStoppablePoint` methods.
	// E.g `isStoppablePoint` to `isStoppable`.
	// [TODO] Inline `above`, `below`, `left`, `right` temporal variable
	isEdgePoint(point) {
	const abovePoint = point.translate([-1, 0])
	const belowPoint = point.translate([+1, 0])

	return (
	this.isStoppablePoint(point) &&
	(!this.isStoppablePoint(abovePoint) \|\| !this.isStoppablePoint(belowPoint))
	)
	}

	isStoppablePoint(point) {
	const leftPoint = point.translate([0, -1])
	const rightPoint = point.translate([0, +1])

	return (
	this.isNonWhiteSpacePoint(point) \|\|
	this.isFirstRowOrLastRowAndStoppable(point) \|\|
	(this.isNonWhiteSpacePoint(leftPoint) &&
	this.isNonWhiteSpacePoint(rightPoint))
	)
	}

	occurrenceIsEverywhereV1(range) {
	// [TODO]: Define endPosition at __HERE__
	const startPosition = range.start
	// __HERE__
	this.callSomeFunction({startPosition, endPosition})
	}

	occurrenceIsEverywhereV2(range) {
	// <snip>
	// [TODO]: Define foldInfo.maxIndent at __HERE__
	foldInfo.minIndent = Math.min(
	foldInfo.minIndent != null ? foldInfo.minIndent : indent,
	indent
	)
	// __HERE__
	}

	// [TODO]: Comment out multiple `console.log` in function.
	// [TODO]: Delete `console.log` included line?
	consolLogScatteredForDebugPurpose(kind, rowRangeWithIndent) {
	if (!foldInfoByKind[kind]) {
	console.log(foldInfoByKind)
	foldInfoByKind[kind] = {rowRangesWithIndent: []}
	console.log(foldInfoByKind[kind])
	}
	const foldInfo = foldInfoByKind[kind]
	console.log(foldInfo)
	foldInfo.rowRangesWithIndent.push(rowRangeWithIndent)
	const {indent} = rowRangeWithIndent
	console.log(indent)
	foldInfo.minIndent = Math.min(
	foldInfo.minIndent != null ? foldInfo.minIndent : indent,
	indent
	)
	foldInfo.maxIndent = Math.max(
	foldInfo.maxIndent != null ? foldInfo.maxIndent : indent,
	indent
	)
	console.log(foldInfo)
	}

	alignOccurrenceOperator() {
	// [TODO] format following TWO table maually by `align` operator

	// \| where\| move to 1st char \| no move \|
	// \|-\|-\|-\|
	// \| top \| `z enter` \| `z t` \|
	// \| middle \| `z .` \| `z z` \|
	// \| bottom \| `z -` \| `z b` \|

	// [TODO] Align member of arrray `one`, `two`, `three` by `textC` keyword.
	// prettier-ignore
	const one = [
	{action: "set", textC: "\| A ab a Ab a"},
	{action: "ensure", key: "f A", textC: " \|A ab a Ab a"},
	{action: "ensure", key: "f A", textC: " A ab a \|Ab a"},
	{action: "ensure", key: ",", textC: " \|A ab a Ab a"},
	{action: "ensure", key: ";", textC: " A ab a \|Ab a"},
	]

	// prettier-ignore
	const two = [
	{action: "set", textC: "\| a ab a cd a"},
	{action: "ensure", key: "f a enter", textC: " \|a ab a cd a"},
	{action: "ensure", key: "f c enter", textC: " a ab a \|cd a"},
	]

	// prettier-ignore
	const three = [
	{action: "set", textC: "\| a ab a cd a"},
	{action: "ensure", key: "f a", textC: "\| a ab a cd a"},
	{action: "ensure", textC: " \|a ab a cd a"},
	{action: "ensure", key: "f c d", textC: " a ab a \|cd a"},
	{action: "ensure", key: "f a", textC: " a ab a \|cd a"},
	{action: "ensure", textC: " a ab a cd \|a"},
	{action: "ensure", key: "F b", textC: " a ab a cd \|a"},
	{action: "ensure", textC: " a a\|b a cd a"},
	]
	}
	}
	// [TODO] Add number to all TODO in this file like TODO:1, TODO:2

	// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
	// Oh! You have reached enlightenment of vmp!
	// Do extra TODO to delete all TODOs in this file
	// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!