Serialization works on `Map<string, Map<string, any>[]>` but deserialization doesn't return a map.

[mrvfino]

Here's a screenshot from my console:

I think what happens here is that during serialization it doesn't get the "map" property (sorry not sure what's its called i'm still new to js). Correct me if i'm worng but since "map" on the serialization output, it fails on this check and returns a jsonObject instead:

mapify-ts/src/index.ts

Line 51 in c29d062

if (objSource.__map__) {

Thanks for this package!

[idemax]

hey @mrvfino could you please share the source code pls?

[mrvfino]

Hi @idemax , will do. But do give me some time though, i still need to dig it from my commits. Thanks!

[mrvfino]

hi @idemax , here's the source code

1. This generates the map structure

import * as XLSX from "xlsx";

/*
"Tab1": [
{"empty": "a"},
{"prop1": "a", "prop2": "b", "prop3": "c"},
{"prop1": "a", "prop2": "b", "prop3": "c"},
{"prop1": "a", "prop2": "b", "prop3": "c"},
]
*/
export async function parseFile(
  file: any,
): Promise<Map<string, Map<string, any>[]>> {
  const buffer = await file.arrayBuffer();
  const workbook = XLSX.read(buffer);
  const sheet_name_list = workbook.SheetNames;
  let tabRecordMap = new Map();
  sheet_name_list.forEach((sheetName, _) => {
    //https://docs.sheetjs.com/docs/api/utilities/array#array-output
    const jsonArray = XLSX.utils.sheet_to_json(
      workbook.Sheets[sheetName],
    ) as Array<Record<string, any>>;
    const mapArray = jsonArray.map((json, _) => {
      return new Map<string, any>(Object.entries(json));
    });
    tabRecordMap.set(sheetName, mapArray);
  });
  return tabRecordMap;
}

2. The generated map from step 1 is then stored in "zustand", "MapifyTs" is used here.

import { create } from "zustand";
import { persist, StorageValue } from "zustand/middleware";
import MapifyTs from "mapify-ts";

type WorksheetStore = {
  currentWorksheetData: Map<string, Map<string, any>[]> | undefined;
  sheets: string[];
  sheetHeadersMap: Map<string, string[]>;
  setCurrentWorksheet: (
    worksheet: Map<string, Map<string, any>[]> | undefined,
  ) => void;
};

export const useWorksheetStore = create<WorksheetStore>()(
  persist(
    (set) => ({
      currentWorksheetData: undefined,
      sheets: [],
      sheetHeadersMap: new Map(),
      setCurrentWorksheet: (worksheet) => {
        const keys = worksheet?.keys();
        const sheets = keys ? Array.from(keys) : [];
        const sheetHeadersMap = new Map<string, string[]>();

        sheets.forEach((sheet, _) => {
          const sheetData = worksheet?.get(sheet) ?? [];
          const headers = mode_of_keys(
            sheetData.map((value, _) => Array.from(value.keys())),
          );
          sheetHeadersMap.set(sheet, headers);
        });

        set({
          currentWorksheetData: worksheet,
          sheets: sheets,
          sheetHeadersMap: sheetHeadersMap,
        });
      },
    }),
    {
      name: "worksheet",
      storage: {
        getItem: (name) => {
          const str = localStorage.getItem(name);

          if (!str) return null;
          const { state } = JSON.parse(str);

          // naive check that the sheet data is empty, for some reason it returns a { foo: {}, bar: {baz:{}} } shaped string
          if (state.sheets.length == 0) {
            return null;
          }

          return {
            state: {
              ...state,
              currentWorksheetData: MapifyTs.deserialize(
                state.currentWorksheetData,
              ),
              sheets: state.sheets,
              sheetHeadersMap: MapifyTs.deserialize(state.sheetHeadersMap),
            },
          };
        },
        setItem: (name, newValue: StorageValue<WorksheetStore>) => {
          // functions cannot be JSON encoded
          const str = JSON.stringify({
            state: {
              ...newValue.state,
              currentWorksheetData: MapifyTs.serialize(
                newValue.state.currentWorksheetData,
              ),
              sheets: newValue.state.sheets,
              sheetHeadersMap: MapifyTs.serialize(
                newValue.state.sheetHeadersMap,
              ),
            },
          });
          localStorage.setItem(name, str);
        },
        removeItem: (name) => localStorage.removeItem(name),
      },
    },
  ),
);

// NOTES:
//
// [
//  ["a", "b", "c"]
//  ["foo", "bar", "baz"] \
//  ["foo", "bar", "baz"]  |=> mode_of_keys: The most common keys to be used for the dropdown.
//  ["foo", "bar", "baz"] /
//  ["x", "y", "z"]
// ]
function mode_of_keys(values: string[][]): string[] {
  const counter = new Map<string, number>();
  values.forEach((value) => {
    const asKey = value.join("-");
    counter.set(asKey, (counter.get(asKey) ?? 0) + 1);
  });
  const ref = new Map<number, string>();
  Array.from(counter.keys()).forEach((key) => {
    ref.set(counter.get(key) ?? -1, key);
  });
  const max = Math.max(...Array.from(counter.values()));
  return ref.get(max)?.split("-") ?? [];
}