feat(ids): Support custom IDs for Sketch library sync

[macintoshhelper]

This adds a document/page name option in the config together with a customIds opt-in option that uses permanent IDs for shared styles in html-sketchapp if you know all IDs (data-sketch-text) are unique and will not change.

This PR should fix library sync between updates (symbols can have a permanent ID).

Documentation should probably be added to the README.md or a new file for setting symbol IDs:

  symbolMiddleware: ({ symbol, node, suffix }) => {
    const symbolName = node.dataset.sketchSymbol;

    symbol.setId(`${symbolName}${suffix}`);
    symbol.setName(symbolName);
  },

I've added documentation to the README for text middleware.

New config options:

{
  name: 'project-id-here',
  customIds: true
}

#18

[JacobBlomgren]

@macintoshhelper This PR seems to be just what I need 🙏 But I’m a little bit confused by symbolMiddleware, the textMiddleware from the README, and the new config options. Is the symbolMiddleware all I need for this to work?

[mathieudutour]

please don't use arbitrary strings as ObjectId, it's going to break Sketch in very subtle ways. Sketch expect IDs to be UUID.

You can generate a fixed UUID from a seed if you want:

import * as seedrandom from 'seedrandom';

const lut = [];
for (let i = 0; i < 256; i += 1) {
  lut[i] = (i < 16 ? '0' : '') + i.toString(16);
}
// Hack (http://stackoverflow.com/a/21963136)
function e7(seed?: ?string) {
  const random = seed ? seedrandom(`${seed}0`) : Math.random;
  const d0 = (random() * 0xffffffff) | 0;
  const d1 = (random() * 0xffffffff) | 0;
  const d2 = (random() * 0xffffffff) | 0;
  const d3 = (random() * 0xffffffff) | 0;
  return `${lut[d0 & 0xff] +
    lut[(d0 >> 8) & 0xff] +
    lut[(d0 >> 16) & 0xff] +
    lut[(d0 >> 24) & 0xff]}-${lut[d1 & 0xff]}${lut[(d1 >> 8) & 0xff]}-${
    lut[((d1 >> 16) & 0x0f) | 0x40]
  }${lut[(d1 >> 24) & 0xff]}-${lut[(d2 & 0x3f) | 0x80]}${lut[(d2 >> 8) & 0xff]}-${
    lut[(d2 >> 16) & 0xff]
  }${lut[(d2 >> 24) & 0xff]}${lut[d3 & 0xff]}${lut[(d3 >> 8) & 0xff]}${lut[(d3 >> 16) & 0xff]}${
    lut[(d3 >> 24) & 0xff]
  }`;
}

// Keep track of previous seeds
const previousSeeds = {};

export function generateID(seed) {
  let _seed;

  if (seed) {
    if (!previousSeeds[seed]) {
      previousSeeds[seed] = 0;
    }
    previousSeeds[seed] += 1;

    _seed = `${seed}${previousSeeds[seed]}`;
  }

  return e7(_seed);
}