Code Monkey home page Code Monkey logo

Comments (4)

mesqueeb avatar mesqueeb commented on May 17, 2024

I had struggled a lot with the export types of my packages in the past, but I finally found a setup that works recently.
The export types I have just fixed in the latest version:
https://arethetypeswrong.github.io/?p=is-what%404.1.10

I think once all packages use the latest version of is-what, dual package hazard should not occur anymore, unless the project set up or any of the dependencies has an issue where it imports both CJS and ESM for some reason. : S So imo this is not really an issue. Sorry!

from is-what.

jcbhmr avatar jcbhmr commented on May 17, 2024

Actually, my problem isn't the types. Its that this library is bundled as two separate duplicate versions: One of CJS and one for ESM when it should probably be just one with the second format just re-exporting the stuff from the "base" version. For example, CJS everything with index.mjs that just exports the cjs stuff.

This is what I'm talking about:
(function () {
  const e = document.createElement('link').relList;
  if (e && e.supports && e.supports('modulepreload')) return;
  for (const r of document.querySelectorAll('link[rel="modulepreload"]')) u(r);
  new MutationObserver((r) => {
    for (const i of r)
      if (i.type === 'childList')
        for (const f of i.addedNodes)
          f.tagName === 'LINK' && f.rel === 'modulepreload' && u(f);
  }).observe(document, { childList: !0, subtree: !0 });
  function n(r) {
    const i = {};
    return (
      r.integrity && (i.integrity = r.integrity),
      r.referrerPolicy && (i.referrerPolicy = r.referrerPolicy),
      r.crossOrigin === 'use-credentials'
        ? (i.credentials = 'include')
        : r.crossOrigin === 'anonymous'
        ? (i.credentials = 'omit')
        : (i.credentials = 'same-origin'),
      i
    );
  }
  function u(r) {
    if (r.ep) return;
    r.ep = !0;
    const i = n(r);
    fetch(r.href, i);
  }
})();
function D(t) {
  if (t.__esModule) return t;
  var e = t.default;
  if (typeof e == 'function') {
    var n = function u() {
      if (this instanceof u) {
        var r = [null];
        r.push.apply(r, arguments);
        var i = Function.bind.apply(e, r);
        return new i();
      }
      return e.apply(this, arguments);
    };
    n.prototype = e.prototype;
  } else n = {};
  return (
    Object.defineProperty(n, '__esModule', { value: !0 }),
    Object.keys(t).forEach(function (u) {
      var r = Object.getOwnPropertyDescriptor(t, u);
      Object.defineProperty(
        n,
        u,
        r.get
          ? r
          : {
              enumerable: !0,
              get: function () {
                return t[u];
              },
            }
      );
    }),
    n
  );
}
var c = {};
function o(t) {
  return Object.prototype.toString.call(t).slice(8, -1);
}
function m(t) {
  return o(t) === 'Undefined';
}
function O(t) {
  return o(t) === 'Null';
}
function g(t) {
  return o(t) !== 'Object'
    ? !1
    : t.constructor === Object && Object.getPrototypeOf(t) === Object.prototype;
}
function B(t) {
  return g(t);
}
function k(t) {
  return g(t) && Object.keys(t).length === 0;
}
function $(t) {
  return o(t) === 'Object';
}
function R(t) {
  return $(t);
}
function U(t) {
  return o(t) === 'Function';
}
function E(t) {
  return o(t) === 'Array';
}
function L(t) {
  return E(t) && t.length === 0;
}
function y(t) {
  return o(t) === 'String';
}
function x(t) {
  return y(t) && t !== '';
}
function V(t) {
  return t === '';
}
function P(t) {
  return o(t) === 'Number' && !isNaN(t);
}
function d(t) {
  return o(t) === 'Boolean';
}
function q(t) {
  return o(t) === 'RegExp';
}
function z(t) {
  return o(t) === 'Map';
}
function I(t) {
  return o(t) === 'WeakMap';
}
function K(t) {
  return o(t) === 'Set';
}
function G(t) {
  return o(t) === 'WeakSet';
}
function w(t) {
  return o(t) === 'Symbol';
}
function H(t) {
  return o(t) === 'Date' && !isNaN(t);
}
function J(t) {
  return o(t) === 'Blob';
}
function Q(t) {
  return o(t) === 'File';
}
function X(t) {
  return o(t) === 'Promise';
}
function Y(t) {
  return o(t) === 'Error';
}
function Z(t) {
  return o(t) === 'Number' && isNaN(t);
}
function C(t) {
  return d(t) || O(t) || m(t) || P(t) || y(t) || w(t);
}
function tt(t) {
  return O(t) || m(t);
}
function et(t, e) {
  if (!(e instanceof Function)) throw new TypeError('Type must be a function');
  if (!Object.prototype.hasOwnProperty.call(e, 'prototype'))
    throw new TypeError('Type is not a class');
  var n = e.name;
  return o(t) === n || !!(t && t.constructor === e);
}
const nt = Object.freeze(
    Object.defineProperty(
      {
        __proto__: null,
        getType: o,
        isAnyObject: $,
        isArray: E,
        isBlob: J,
        isBoolean: d,
        isDate: H,
        isEmptyArray: L,
        isEmptyObject: k,
        isEmptyString: V,
        isError: Y,
        isFile: Q,
        isFullString: x,
        isFunction: U,
        isMap: z,
        isNaNValue: Z,
        isNull: O,
        isNullOrUndefined: tt,
        isNumber: P,
        isObject: B,
        isObjectLike: R,
        isPlainObject: g,
        isPrimitive: C,
        isPromise: X,
        isRegExp: q,
        isSet: K,
        isString: y,
        isSymbol: w,
        isType: et,
        isUndefined: m,
        isWeakMap: I,
        isWeakSet: G,
      },
      Symbol.toStringTag,
      { value: 'Module' }
    )
  ),
  rt = D(nt);
Object.defineProperty(c, '__esModule', { value: !0 });
c.fixEmptyStrings =
  c.transformRawDataMap =
  c.transformRawData =
  c.omitWithoutFunctions =
  c.iterateApi =
  c.cleanObject =
    void 0;
const l = rt;
function F(t) {
  const e = {};
  return (
    Object.keys(t).forEach((n) => {
      const u = t[n];
      !l.isNull(u) && !l.isUndefined(u) && !l.isString(u) && (e[n] = u);
    }),
    e
  );
}
c.cleanObject = F;
async function it(t, e, n, u) {
  let r;
  const i = [],
    f = Math.min(100, e);
  for (; e < 0 || i.length < e; ) {
    const W = F({ ...n, after: r, first: f }),
      p = await t.get(u, { searchParams: W }).json();
    if ((i.push(...p.data), (r = p.pagination.cursor), p.data.length < f))
      break;
  }
  return e > 0 ? i.slice(0, e) : i;
}
c.iterateApi = it;
function ut(t, e) {
  return Object.keys(t)
    .filter((n) => !l.isFunction(t[n]))
    .filter((n) => !e.includes(n))
    .reduce((n, u) => ((n[u] = t[u]), n), {});
}
c.omitWithoutFunctions = ut;
function ot(t, e) {
  return (n) => new t(n, e);
}
c.transformRawData = ot;
function st(t, e) {
  return (n) => n.map((u) => new t(u, e));
}
c.transformRawDataMap = st;
function ct(t) {
  return t === '' || t === void 0 ? null : t;
}
c.fixEmptyStrings = ct;
function s(t) {
  return Object.prototype.toString.call(t).slice(8, -1);
}
function j(t) {
  return s(t) === 'Undefined';
}
function N(t) {
  return s(t) === 'Null';
}
function a(t) {
  if (s(t) !== 'Object') return !1;
  const e = Object.getPrototypeOf(t);
  return !!e && e.constructor === Object && e === Object.prototype;
}
function ft(t) {
  return a(t);
}
function lt(t) {
  return a(t) && Object.keys(t).length === 0;
}
function at(t) {
  return a(t) && Object.keys(t).length > 0;
}
function M(t) {
  return s(t) === 'Object';
}
function bt(t) {
  return M(t);
}
function pt(t) {
  return typeof t == 'function';
}
function S(t) {
  return s(t) === 'Array';
}
function mt(t) {
  return S(t) && t.length > 0;
}
function Ot(t) {
  return S(t) && t.length === 0;
}
function h(t) {
  return s(t) === 'String';
}
function gt(t) {
  return h(t) && t !== '';
}
function yt(t) {
  return t === '';
}
function b(t) {
  return s(t) === 'Number' && !isNaN(t);
}
function jt(t) {
  return b(t) && t > 0;
}
function Nt(t) {
  return b(t) && t < 0;
}
function A(t) {
  return s(t) === 'Boolean';
}
function St(t) {
  return s(t) === 'RegExp';
}
function ht(t) {
  return s(t) === 'Map';
}
function $t(t) {
  return s(t) === 'WeakMap';
}
function Et(t) {
  return s(t) === 'Set';
}
function Pt(t) {
  return s(t) === 'WeakSet';
}
function _(t) {
  return s(t) === 'Symbol';
}
function dt(t) {
  return s(t) === 'Date' && !isNaN(t);
}
function wt(t) {
  return s(t) === 'Blob';
}
function Ft(t) {
  return s(t) === 'File';
}
function Mt(t) {
  return s(t) === 'Promise';
}
function At(t) {
  return s(t) === 'Error';
}
function _t(t) {
  return s(t) === 'Number' && isNaN(t);
}
function Tt(t) {
  return A(t) || N(t) || j(t) || b(t) || h(t) || _(t);
}
const vt = T(N, j);
function T(t, e, n, u, r) {
  return (i) => t(i) || e(i) || (!!n && n(i)) || (!!u && u(i)) || (!!r && r(i));
}
function v(t, e) {
  if (!(e instanceof Function)) throw new TypeError('Type must be a function');
  if (!Object.prototype.hasOwnProperty.call(e, 'prototype'))
    throw new TypeError('Type is not a class');
  const n = e.name;
  return s(t) === n || !!(t && t.constructor === e);
}
function Wt(t, e) {
  if (typeof e == 'function') {
    for (let n = t; n; n = Object.getPrototypeOf(n)) if (v(n, e)) return !0;
    return !1;
  } else {
    for (let n = t; n; n = Object.getPrototypeOf(n)) if (s(n) === e) return !0;
    return !1;
  }
}
const Dt = Object.freeze(
  Object.defineProperty(
    {
      __proto__: null,
      getType: s,
      isAnyObject: M,
      isArray: S,
      isBlob: wt,
      isBoolean: A,
      isDate: dt,
      isEmptyArray: Ot,
      isEmptyObject: lt,
      isEmptyString: yt,
      isError: At,
      isFile: Ft,
      isFullArray: mt,
      isFullObject: at,
      isFullString: gt,
      isFunction: pt,
      isInstanceOf: Wt,
      isMap: ht,
      isNaNValue: _t,
      isNegativeNumber: Nt,
      isNull: N,
      isNullOrUndefined: vt,
      isNumber: b,
      isObject: ft,
      isObjectLike: bt,
      isOneOf: T,
      isPlainObject: a,
      isPositiveNumber: jt,
      isPrimitive: Tt,
      isPromise: Mt,
      isRegExp: St,
      isSet: Et,
      isString: h,
      isSymbol: _,
      isType: v,
      isUndefined: j,
      isWeakMap: $t,
      isWeakSet: Pt,
    },
    Symbol.toStringTag,
    { value: 'Module' }
  )
);
console.log(c);
console.log(Dt);

You can see the demo here: https://stackblitz.com/edit/vitejs-vite-mpcory?file=vite.config.ts,index.js,dist%2Fassets%2Findex-27addc3e.js&terminal=dev

Note that that demo has TWO DUPLICATE versions of the is-what package. THATs the dual package hazard. 🤣

It's caused by Node.js following the require condition and the import condition BOTH and then seeing two different files when those conditions are resolved. Then Vite just takes those and bundles them as two separate things. Ideally they'd both point to a single canonical source with a wrapper ESM or CJS that re-exports the other

Does that make sense as to what my concern is? 🤔

from is-what.

mesqueeb avatar mesqueeb commented on May 17, 2024

@jcbhmr kinda... 🤔 😅 well i'm open to jump on the ESM only wagon soonish. IF ESM means I don't need to wrack my head in tooling hell anymore, than I'm all for that. I just wanna write beautiful code and not think about how stuff gets bundled tbh. : P

I feel like we can still add a few more functions to the current version, and once everything's stable in a few weeks or so we can do a major ESM only node v16 release.

from is-what.

jcbhmr avatar jcbhmr commented on May 17, 2024

kinda... 🤔 😅

Let me try again 😆 hopefully this doesn't confuse you more lmao

  1. You compile the code twice: one for MJS and one for CJS.
  2. Packages import either the import condition or the require condition depending on if import {} from "is-what" or const {} = require("is-what").
  3. If you do import in one .mjs file and require() in another .cjs file, you'll import two completely different files with different code.
  4. If one of your dependencies uses require("is-what") they get the require: ... export condition, even if you use import and get the import: ... condition.
  5. When you bundle, your bundler follows the same export rules!
  6. Thus, you get one require() copy and one import copy.

If instead, you do:

// index.mjs
// You can import CJS from MJS, but you CAN'T require() MJS from CJS 😭
export { isArray, isObject } from "./index.cjs"
dist/
  index.mjs
  index.cjs
  isArray.cjs
  isObject.cjs
  ...

Then that fixes it! Now the require and import conditions will map to the same underlying code instead of two duplicate versions of it. Thus, your bundler when it follows the import and require imports will end up with a single canonical source that's just re-exported in the MJS case.

@mesqueeb Does that make it more or less clear? 🤔😂

from is-what.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.