fix: revision for #210

Author: Alive24

packages/demo/src/app/utils/(tools)/Molecule/Molecule.tsx

@@ -10,10 +10,10 @@ import { Textarea } from "@/src/components/Textarea";
 import { Button } from "@/src/components/Button";
 
 type Props = {
-  updateCodecMap: (token: any) => void;
+  updateCodecRecord: (codecRecord: ccc.molecule.CodecRecord) => void;
 };
 
-export const MoleculeParser: React.FC<Props> = ({ updateCodecMap }) => {
+export const MoleculeParser: React.FC<Props> = ({ updateCodecRecord }) => {
   const [inputMol, setInputMol] = useState(() => {
     if (typeof window !== "undefined") {
       return localStorage.getItem("cachedMol") || "";
@@ -27,25 +27,25 @@ export const MoleculeParser: React.FC<Props> = ({ updateCodecMap }) => {
   const handleConfirm = useCallback(() => {
     try {
       // get user input schema, and append with primitive schema
-      const userCodecMap = ccc.molecule.getCodecMapFromMol(
+      const userCodecRecord = ccc.molecule.parseMoleculeSchema(
         inputMol + blockchainSchema,
         {
-          refs: builtinCodecs,
+          extraReferences: builtinCodecs,
         },
       );
-      const codecMap = mergeBuiltinCodecs(userCodecMap);
+      const codecRecord = mergeBuiltinCodecs(userCodecRecord);
       setParseSuccess(true);
-      updateCodecMap(codecMap);
+      updateCodecRecord(codecRecord);
       log("Successfully parsed schema");
       if (typeof window !== "undefined") {
         localStorage.setItem("cachedMol", inputMol);
       }
-    } catch (error: any) {
+    } catch (e: any) {
       setParseSuccess(false);
-      updateCodecMap({});
-      error(error.message);
+      updateCodecRecord({});
+      error(e.message);
     }
-  }, [inputMol, log, updateCodecMap]);
+  }, [error, inputMol, log, updateCodecRecord]);
 
   return (
     <div style={{ marginBottom: 16 }}>

packages/demo/src/app/utils/(tools)/Molecule/SchemaSelect.tsx

@@ -3,34 +3,36 @@ import { ccc } from "@ckb-ccc/connector-react";
 import { Dropdown } from "@/src/components/Dropdown";
 
 type Props = {
-  codecMap: ccc.molecule.CodecMap;
+  codecRecord: ccc.molecule.CodecRecord;
   selectedCodecName: string;
   onSelectCodec: (name: string) => void;
   mode: "decode" | "encode";
   onSelectMode: (mode: "decode" | "encode") => void;
 };
 
 const createCodecOptionsFromMap = (
-  codecMap: ccc.molecule.CodecMap,
+  codecRecord: ccc.molecule.CodecRecord,
 ): string[] => {
-  return Object.keys(codecMap);
+  return Object.keys(codecRecord);
 };
 
 export const SchemaSelect: React.FC<Props> = ({
   onSelectCodec,
   selectedCodecName,
-  codecMap,
+  codecRecord,
   mode,
   onSelectMode,
 }) => {
   const handleChange = (newValue: string | null) => {
     onSelectCodec(newValue as string);
   };
-  const schemaOptions = createCodecOptionsFromMap(codecMap).map((schema) => ({
-    name: schema,
-    displayName: schema,
-    iconName: "Hash" as const,
-  }));
+  const schemaOptions = createCodecOptionsFromMap(codecRecord).map(
+    (schema) => ({
+      name: schema,
+      displayName: schema,
+      iconName: "Hash" as const,
+    }),
+  );
 
   return (
     <div className="flex flex-row items-center gap-4">

packages/demo/src/app/utils/(tools)/Molecule/constants.ts

@@ -3,7 +3,7 @@ import { ccc } from "@ckb-ccc/connector-react";
 /**
  * built-in re-writable codecs
  */
-export const builtinCodecs: ccc.molecule.CodecMap = {
+export const builtinCodecs: ccc.molecule.CodecRecord = {
   Uint8: ccc.mol.Uint8,
   Uint16: ccc.mol.Uint16,
   Uint32: ccc.mol.Uint32,
@@ -26,8 +26,8 @@ export const builtinCodecs: ccc.molecule.CodecMap = {
  * @param userTokens
  */
 export const mergeBuiltinCodecs = (
-  userCodecs: ccc.molecule.CodecMap,
-): ccc.molecule.CodecMap => {
+  userCodecs: ccc.molecule.CodecRecord,
+): ccc.molecule.CodecRecord => {
   return { ...userCodecs, ...builtinCodecs };
 };
 

packages/demo/src/app/utils/(tools)/Molecule/page.tsx

@@ -18,52 +18,51 @@ export default function Molecule() {
   const { createSender } = useApp();
   const { log } = createSender("Molecule");
 
-  const [codecMap, setCodecMap] = useState<ccc.molecule.CodecMap>({});
+  const [codecRecord, setCodecRecord] = useState<ccc.molecule.CodecRecord>({});
   const [selectedCodecName, setSelectedCodecName] = useState<string>("");
   const [mode, setMode] = useState<"decode" | "encode">("decode");
-  const handleCodecMap = useCallback(
-    (codecMap: ccc.molecule.CodecMap) => {
-      setCodecMap(codecMap);
-      setSelectedCodecName(Object.keys(codecMap)[0]);
+  const handleCodecRecord = useCallback(
+    (codecRecord: ccc.molecule.CodecRecord) => {
+      setCodecRecord(codecRecord);
+      setSelectedCodecName(Object.keys(codecRecord)[0]);
     },
-    [setCodecMap, setSelectedCodecName],
+    [setCodecRecord, setSelectedCodecName],
   );
 
   const handleSelectCodec = (name: string) => {
     setSelectedCodecName(name);
   };
 
   useEffect(() => {
-    // TODO: get from local storage
     let cachedMol = localStorage.getItem("cachedMol");
     if (!cachedMol) {
       cachedMol = "";
     }
 
-    const userCodecMap = ccc.molecule.getCodecMapFromMol(
+    const userCodecRecord = ccc.molecule.parseMoleculeSchema(
       cachedMol + blockchainSchema,
       {
-        refs: builtinCodecs,
+        extraReferences: builtinCodecs,
       },
     );
-    const codecMap = mergeBuiltinCodecs(userCodecMap);
-    handleCodecMap(codecMap);
-  }, [handleCodecMap]);
+    const codecRecord = mergeBuiltinCodecs(userCodecRecord);
+    handleCodecRecord(codecRecord);
+  }, [handleCodecRecord]);
 
   return (
     <div className="flex w-full flex-col items-stretch">
-      <MoleculeParser updateCodecMap={handleCodecMap} />
-      {Object.keys(codecMap).length > 0 && (
+      <MoleculeParser updateCodecRecord={handleCodecRecord} />
+      {Object.keys(codecRecord).length > 0 && (
         <SchemaSelect
           selectedCodecName={selectedCodecName}
-          codecMap={codecMap}
+          codecRecord={codecRecord}
           onSelectCodec={handleSelectCodec}
           mode={mode}
           onSelectMode={setMode}
         />
       )}
-      {Object.keys(codecMap).length > 0 && selectedCodecName !== "" && (
-        <DataInput codec={codecMap[selectedCodecName]} mode={mode} />
+      {Object.keys(codecRecord).length > 0 && selectedCodecName !== "" && (
+        <DataInput codec={codecRecord[selectedCodecName]} mode={mode} />
       )}
     </div>
   );

packages/molecule/README.md

@@ -36,7 +36,7 @@
   Fully enabling CKB's Turing completeness and cryptographic freedom power.
 </p>
 
-Get `CodecMap` from Molecule schema.
+Get `CodecRecord` from Molecule schema.
 
 <h3 align="center">
   Read more about CCC on <a href="https://docs.ckbccc.com">our website</a> or <a href="https://github.com/ckb-devrel/ccc">GitHub Repo</a>.

packages/molecule/jest.config.js

@@ -11,4 +11,7 @@ module.exports = {
       { tsconfig: "tsconfig.json" },
     ],
   },
+  moduleNameMapper: {
+    "^(\\.{1,2}/.*)\\.js$": "$1", // strip .js extension for imports
+  },
 };

packages/molecule/src/barrel.ts

@@ -1,2 +1,2 @@
-export * from "./molecule";
-export * from "./type";
+export * from "./molecule.js";
+export * from "./type.js";