tungsten 0.2.0 → 0.2.2

package/dist/babelPlugins/BabelTransformComponentStyles.js

@@ -0,0 +1,441 @@
+// BabelTransformComponentStyles
+// exports MakeBabelTransformComponentStyles (function)
+//
+// runs preprocessors (.e.g SASS, SCSS, LESS) on component
+// stylesheets, scopes names, and converts it into an object
+// that can be applied to component output at runtime
+// (I think)
+import fs from 'fs';
+import { join, dirname, basename, sep, relative } from 'path';
+import * as sass from 'sass';
+import postcss from 'postcss';
+import { mapToArray as objectMapToArray } from 'sxy-lib/objects.js';
+import { TransformCssNames } from "../postcssPlugins/TransformCssNames.js";
+import { CssNames } from "../CssNames.js";
+//const CSSModulesSync = require('postcss-modules-sync').default
+import { watch } from "../watch.js";
+import slash from 'slash';
+import { resolveSassImport } from 'tungsten/build/resolveSassScssImports.js';
+import { sassImportParser } from 'tungsten/build/sassImportParser.js';
+import { modifySassImports } from 'tungsten/build/modifySassImports.js';
+import { scssImportParserChatgpt } from 'tungsten/build/scssImportParserChatgpt.js';
+import { errorOut } from 'tungsten';
+import { fixImportsInSassErrorMessage } from "./fixImportsInSassErrorMessage.js";
+import { throwError } from "../throwError.js";
+class StyleAssistant {
+  static toCss(data, fullFile, fullSourceFile, importBase) {
+    return {
+      css: data,
+      dependencies: []
+    };
+  }
+}
+class Css extends StyleAssistant {
+  static toCss(data) {
+    const dependencies = [];
+    return {
+      css: data,
+      dependencies
+    };
+  }
+}
+// function getSassScssImporter(fullSourceFile: string, importBase: string, dependencies: string[]): sass.Importer { 
+//     return {
+//         canonicalize(url: string, context): URL {
+//             console.log(`importer->canonicalize '${url}' in ${fullSourceFile}`)
+//             return new URL(url)
+//         },
+//         load(url: URL): sass.ImporterResult | null {
+//             console.log(`importer->load '${url}' in ${fullSourceFile}`)
+//             const target = resolveScssImport(String(url), fullSourceFile, importBase)
+//             console.log('import resolved target:', target)
+//             const contents = readFileSync(target, 'utf-8')
+//             console.log('file contents', contents)
+//             // this url is only relative
+//             dependencies.push(target)
+//             return {
+//                 contents: readFileSync(target, 'utf-8'),
+//                 syntax: target.endsWith('.sass') ? 'indented' : 'scss', // could the import be a CSS file?
+//             }
+//         }
+//     }
+// }
+// function getSassScssFileImporter(fullSourceFile: string, importBase: string, dependencies: string[]) {
+//     return {
+//         findFileUrl(url: string) {
+//             //console.log('findFileUrl', url)
+//             return new URL(url)
+//         }
+//     }
+// }
+function sassScssToCss(data, fullFile, fullSourceFile, importBase, syntax) {
+  //console.log(`Component SCSS in ${fullSourceFile} to css`)
+  const dependencies = new Set();
+  const imports = syntax === 'indented' ? sassImportParser(data) : scssImportParserChatgpt(data);
+  const importsMap = [];
+  //if (sassImportResolution === 'js') {
+  for (const i of imports) {
+    const resolved = resolveSassImport(i.target, fullSourceFile, importBase);
+    //console.log('relative', fullSourceFile, resolved, slash(relative(dirname(fullSourceFile), resolved)))
+    dependencies.add(resolved);
+    importsMap.push({
+      ...i,
+      to: slash(relative(dirname(fullSourceFile), resolved)) // should we use absolute or relative?
+    });
+  }
+  data = modifySassImports(data, importsMap);
+  //} else {
+  // standard import resolution
+  //}
+  const compileOptions = {
+    syntax,
+    url: new URL('file:' + fullSourceFile)
+    //loadPaths: [importBase],
+    //importer: getSassScssImporter(fullSourceFile, importBase, dependencies)
+  };
+  let compileResult;
+  try {
+    compileResult = sass.compileString(data, compileOptions);
+  } catch (e) {
+    if (typeof e !== 'object' || e === null || !('message' in e) || typeof e.message !== 'string') {
+      throwError('BabelTransformComponentStyles', `the Sass compiler threw a value without a string message: ${String(e)}`);
+    }
+    const {
+      message,
+      foundImportError
+    } = fixImportsInSassErrorMessage(e.message, importsMap);
+    if (foundImportError) errorOut(`Tungsten uses modified import resolution for SASS. Relative imports must start with ./ or ../`);
+    e.message = message;
+    throw e;
+  }
+  const {
+    css
+  } = compileResult;
+  return {
+    // seem to accept a file location, which is needed for imports
+    css,
+    dependencies: Array.from(dependencies)
+  };
+}
+class Sass extends StyleAssistant {
+  static toCss(data, fullFile, fullSourceFile, importBase) {
+    return sassScssToCss(data, fullFile, fullSourceFile, importBase, 'indented');
+  }
+}
+class Scss extends StyleAssistant {
+  static toCss(data, fullFile, fullSourceFile, importBase) {
+    return sassScssToCss(data, fullFile, fullSourceFile, importBase, 'scss');
+  }
+}
+class ReactZoneScss extends Scss {}
+function triggerDependers(styleDependers, dependers) {
+  //console.log('triggerDependers')
+  //console.log('styleDependers', styleDependers)
+  //console.log('dependers', dependers)
+  const time = new Date();
+  for (const depender of dependers) {
+    // bump the updated time on the file to make babel/webpack reprocess
+    fs.utimesSync(depender, time, time);
+    if (depender in styleDependers) {
+      // check for further dependers, tree like, recursively
+      const nestedDependers = styleDependers[depender];
+      if (nestedDependers === undefined) {
+        throwError('BabelTransformComponentStyles', `missing depender set for ${depender}`);
+      }
+      triggerDependers(styleDependers, nestedDependers);
+    }
+  }
+}
+function cssToLocalClassNames(data, file, moduleName) {
+  //console.log('cssToLocalClassNames')
+  const names = new CssNames(moduleName);
+  const transformedCss = postcss([TransformCssNames({
+    //generateScopedName: opts.classNameFormat,
+    moduleName,
+    outNames: names
+  })]).process(data, {
+    from: file
+  }).css;
+  return {
+    names,
+    transformedCss
+  };
+}
+function cssToReactZoneStyles(data, file, moduleName) {
+  const names = new CssNames(moduleName);
+  const scopeClass = `${moduleName}_reactZone`;
+  names.classes.reactZone = scopeClass;
+  const root = postcss([]).process(data, {
+    from: file
+  }).root;
+  root.walkRules(rule => {
+    let parent = rule.parent;
+    while (parent !== undefined && parent.type !== 'root') {
+      if (parent.type === 'atrule' && /keyframes$/i.test(parent.name)) return;
+      parent = parent.parent;
+    }
+    rule.selectors = rule.selectors.map(selector => `.${scopeClass} ${selector}`);
+  });
+  return {
+    names,
+    transformedCss: root.toString()
+  };
+}
+//// The babel plugin creator that will be called in the babel config, returing the babel plugin
+//// Has side effects!!
+export function MakeBabelTransformComponentStyles(opts) {
+  opts.classNameFormat = 'classNameFormat' in opts ? opts.classNameFormat : '';
+  opts.cssOutputFile = 'cssOutputFile' in opts ? opts.cssOutputFile : '';
+  opts.cssModulesOutputDir = 'cssModulesOutputDir' in opts ? opts.cssModulesOutputDir : '';
+  //opts.functionNames = ('functionNames' in opts) ? opts.functionNames : ['Sass']
+  const languages = {
+    'Css': Css,
+    'Sass': Sass,
+    'Scss': Scss,
+    'ReactZoneScss': ReactZoneScss
+    //'Less': Less,
+  };
+  const watchStyles = opts.cssOutputFile || opts.cssModulesOutputDir;
+  // should this code be moved to babel - pre?
+  // prepare the css file by creating a blank file or clearing the existing file
+  if (opts.cssOutputFile) {
+    // create the folder the css files exists in if needed
+    const outDir = dirname(opts.cssOutputFile);
+    if (!fs.existsSync(outDir)) fs.mkdirSync(outDir, {
+      recursive: true
+    });
+    fs.writeFileSync(opts.cssOutputFile, '');
+  }
+  const styleDependers = {};
+  // start watching for changes to sass files
+  if (watchStyles) {
+    watch({
+      dir: opts.projectAbsSourceDir,
+      patterns: ['**/*.sass', '**/*.scss'
+      //'**/*.less'
+      ],
+      handler: (filename /*, event*/) => {
+        //filename = slash(filename)
+        //console.log('[watch event for style file', filename)
+        //console.log('styleDependers', styleDependers)
+        // do we need to respond differently to any specific events?
+        // unsure
+        //const fullFilename = process.cwd() + '\\' + filename.replaceAll('/', '\\')
+        // a file may import a filename without an extension. This could resolve to either a .sass or .scss file
+        // and which one is resolves too may change over time, if files are created and removed.
+        // its an error for an import to resolve to both a .sass and .scss file
+        // we want to trigger an update if the import could resolve to this file
+        const filenameWithoutExtension = filename.slice(0, filename.lastIndexOf('.'));
+        if (filename in styleDependers) {
+          //console.log(filename, 'is in styleDependers list')
+          const dependers = styleDependers[filename];
+          if (dependers === undefined) {
+            throwError('BabelTransformComponentStyles', `missing depender set for ${filename}`);
+          }
+          triggerDependers(styleDependers, dependers);
+        }
+        //console.log('now looking for', filenameWithoutExtension)
+        if (filenameWithoutExtension in styleDependers) {
+          //console.log(filenameWithoutExtension, '(without extension) is in styleDependers list')
+          const dependers = styleDependers[filenameWithoutExtension];
+          if (dependers === undefined) {
+            throwError('BabelTransformComponentStyles', `missing depender set for ${filenameWithoutExtension}`);
+          }
+          triggerDependers(styleDependers, dependers);
+        }
+      }
+    });
+  }
+  //const files = {}
+  const stylesheets = {};
+  const individualFolderName = 'i';
+  function getModuleName(relFilePath, index) {
+    //console.log('getModuleName filename', filename)
+    //let filePath = filename.slice(process.cwd().length +1)
+    //filePath = filePath.slice((projectConfig.reactAppLocation).length + 1)
+    //console.log('projectCodeBase', opts.projectCodeBase)
+    const fileName = basename(relFilePath);
+    const name = fileName.split('.')[0];
+    if (name === undefined) {
+      throwError('BabelTransformComponentStyles', `could not derive a module name from ${relFilePath}`);
+    }
+    const parts = relFilePath.split(sep);
+    if (name === 'index') {
+      parts.pop();
+    } else {
+      parts[parts.length - 1] = name;
+    }
+    if (index > 1) parts.push(index);
+    const moduleName = parts.join('-');
+    return moduleName;
+  }
+  function writeOutIfNeeded(css, names, opts) {
+    // write a specific module file
+    if (typeof opts.cssOutputFile === 'string' && opts.cssOutputFile !== '') {
+      const modulesFolder = join(dirname(opts.cssOutputFile), individualFolderName);
+      if (!fs.existsSync(modulesFolder)) fs.mkdirSync(modulesFolder, {
+        recursive: true
+      });
+      const stylesheet = stylesheets[names.moduleName];
+      if (stylesheet === undefined) {
+        throwError('BabelTransformComponentStyles', `missing output filename for CSS module ${names.moduleName}`);
+      }
+      fs.writeFileSync(join(modulesFolder, stylesheet), `${css}\n`);
+    }
+    //const mode = (isDev) ? 'new' : 'old'
+    const mode = 'new';
+    if (typeof opts.cssOutputFile === 'string' && opts.cssOutputFile !== '') {
+      //console.log('css:', css)
+      if (mode === 'new') {
+        // write a bunch of @import statements
+        fs.writeFileSync(opts.cssOutputFile, Object.values(stylesheets).map(file => `@import "${individualFolderName}/${file}";`).join('\n'));
+      } else {
+        const startLine = `/*Module ${names.moduleName}*/`;
+        const endLine = `/*End Module ${names.moduleName}*/`;
+        // strip the old module code from the css file, if it exists
+        // maybe this is inefficient
+        const fileLines = fs.readFileSync(opts.cssOutputFile, 'utf-8').split('\n');
+        let allow = true;
+        let startLineFound = false;
+        let endLineFound = false;
+        const newLines = [];
+        for (const line of fileLines) {
+          if (line === startLine) {
+            startLineFound = true;
+            allow = false;
+          }
+          if (allow) newLines.push(line);
+          if (line === endLine) {
+            if (startLineFound) {
+              endLineFound = true;
+              allow = true;
+            }
+          }
+        }
+        if (endLineFound) {
+          fs.writeFileSync(opts.cssOutputFile, newLines.join('\n'));
+        }
+        fs.appendFileSync(opts.cssOutputFile, `${startLine}\n` + `${css}\n` + `${endLine}\n`);
+      }
+    }
+  }
+  let index = 1;
+  // return the babel plugin
+  return function BabelTransformComponentStyles(babel) {
+    const t = babel.types;
+    return {
+      name: 'ast-transform',
+      // not required
+      pre(state) {
+        //state.__stylesheetIndex = 1
+        state.opts.stylesheetIndex = 1;
+        state.iteration = index++; // wanted to make this available inside visitors, but doesn't seem to be
+      },
+      visitor: {
+        TaggedTemplateExpression(path, state) {
+          //console.log('tte visitor')
+          //console.log('state', state)
+          // this this index as part of the scoping
+          const tte = path.node;
+          const tag = tte.tag;
+          if (tag.type === 'Identifier' && tag.name in languages) {
+            //if ( opts.functionNames.includes(tag.name) ) {
+            const tagName = tag.name; // eslint-disable-line no-type-assertion/no-type-assertion -- fine, TS narrowing from the 'in' check above isn't working here
+            //console.log('found stylesheet', tag.name)
+            const Assistant = languages[tagName];
+            const template = tte.quasi.quasis[0];
+            if (template === undefined) {
+              throwError('BabelTransformComponentStyles', 'encountered a tagged template without a template element');
+            }
+            const rawStyles = template.value.raw;
+            //console.log('node', path.node)
+            //console.log('state.file.opts.filename', state.file.opts.filename)
+            const fullFilePath = slash(state.filename);
+            const relFilePath = fullFilePath.slice(opts.projectAbsCodeDir.length + 1);
+            const fullSourceFilePath = join(opts.projectAbsSourceDir, relFilePath);
+            //console.log('fullFilePath', fullFilePath)
+            //console.log('relFilePath', relFilePath)
+            //console.log('fullSourceFilePath', fullSourceFilePath)
+            //// transforming css
+            //// and writing to css files
+            // create a name based on the component file name and path
+            const moduleName = getModuleName(relFilePath, state.file.opts.stylesheetIndex);
+            //console.log('transforming to css')
+            // transform the CSS and find it's dependncies (if using a pre-processor)
+            const {
+              css,
+              dependencies
+            } = Assistant.toCss(rawStyles, fullFilePath, fullSourceFilePath, opts.projectAbsStyleImportDir);
+            //console.log('result,', css)
+            //////////////////// deps
+            //console.log(index, 'watchStyles', watchStyles)
+            if (watchStyles) {
+              // update the list of dependencies for the stylesheet watcher
+              //console.log(index, 'styleDependers', styleDependers)
+              // deps clearout
+              for (const file in styleDependers) {
+                //console.log(index, 'testing for', fullFilePath, 'in', styleDependers[file])
+                const dependers = styleDependers[file];
+                if (dependers === undefined) {
+                  throwError('BabelTransformComponentStyles', `missing depender set for ${file}`);
+                }
+                if (dependers.has(fullFilePath)) {
+                  //if (fullFilePath in styleDependers[file]) {
+                  //styleDependers[file].remove(fullFilePath)
+                  //console.log(index, 'found', fullFilePath)
+                  //console.log('removing it from the array')
+                  //arrayRemove(styleDependers[file], fullFilePath)
+                  dependers.delete(fullFilePath);
+                }
+              }
+              // add this file to the list of files depending on this file
+              for (let dep of dependencies) {
+                dep = slash(dep);
+                if (!(dep in styleDependers)) {
+                  //console.log('creating a set for dep:', dep)
+                  styleDependers[dep] = new Set();
+                }
+                //styleDependers[dep].push(fullFilePath)
+                const dependers = styleDependers[dep];
+                if (dependers === undefined) {
+                  throwError('BabelTransformComponentStyles', `failed to create depender set for ${dep}`);
+                }
+                dependers.add(fullFilePath);
+              }
+            }
+            //////////////////// end deps
+            //console.log(index, 'after deps handling styleDependers', styleDependers)
+            const {
+              names,
+              transformedCss
+            } = tagName === 'ReactZoneScss' ? cssToReactZoneStyles(css, fullFilePath, moduleName) : cssToLocalClassNames(css, fullFilePath, moduleName);
+            stylesheets[moduleName] = moduleName + '.css';
+            writeOutIfNeeded(transformedCss, names, opts);
+            // increment for the next one
+            state.__stylesheetIndex++;
+            state.file.opts.stylesheetIndex++;
+            // We could remove the style property if it is not doing anything, but this could break application logic that depends on style existing
+            // if (count(names.tags) === 0 && count(names.classes) === 0) {       
+            //     path.parentPath.remove()// replaceWith(t.identifier('undefined'))
+            //     return
+            // }
+            const props = [t.objectProperty(t.stringLiteral('moduleName'), t.stringLiteral(names.moduleName))];
+            //if (names.tags !== undefined) 
+            props.push(t.objectProperty(t.stringLiteral('tags'), t.objectExpression(objectMapToArray(
+            // from sxy-standard library
+            names.tags, (key, value) => t.objectProperty(t.stringLiteral(key), t.stringLiteral(value))))));
+            //if (names.classes !== undefined)
+            props.push(t.objectProperty(t.stringLiteral('classes'), t.objectExpression(objectMapToArray(
+            // from sxy-standard library
+            names.classes, (key, value) => t.objectProperty(t.stringLiteral(key), t.stringLiteral(value))))));
+            const obj = t.objectExpression(props);
+            path.replaceWith(obj);
+          }
+        }
+      }
+    };
+  };
+}
+// export function MakeBabelTransformComponentStyles() {
+//     //
+// }

package/dist/babelPlugins/BabelTransformCssImports.d.ts

@@ -0,0 +1,16 @@
+import { Babel, NodePath } from './BabelTypes.js';
+import { type ImportDeclaration } from '@babel/types';
+import { BabelState } from './BabelState.type.js';
+type Opts = {
+    projectDir: string;
+    absSourceDir: string;
+    absCodeDir: string;
+};
+export declare function MakeBabelTransformCssImports(opts: Opts): (babel: Babel) => {
+    pre: (state: BabelState) => void;
+    visitor: {
+        ImportDeclaration: (path: NodePath<ImportDeclaration>) => void;
+    };
+};
+export {};
+//# sourceMappingURL=BabelTransformCssImports.d.ts.map

package/dist/babelPlugins/BabelTransformCssImports.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BabelTransformCssImports.d.ts","sourceRoot":"","sources":["../../src/babelPlugins/BabelTransformCssImports.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAc,MAAM,iBAAiB,CAAA;AAE7D,OAAO,EAAQ,KAAK,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAQjD,KAAK,IAAI,GAAG;IACR,UAAU,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,MAAM,CAAA;IACpB,UAAU,EAAE,MAAM,CAAA;CACrB,CAAA;AACD,wBAAgB,4BAA4B,CAAC,IAAI,EAAE,IAAI,IACV,OAAO,KAAK;iBAMvB,UAAU;;kCAUO,QAAQ,CAAC,iBAAiB,CAAC;;EA+I7E"}

package/dist/babelPlugins/BabelTransformCssImports.js

@@ -0,0 +1,133 @@
+// BabelTransformCssImports
+// exports MakeBabelTransformComponentStyles (function)
+//
+// Converts imports of raw CSS files into a variable declaration
+// storing the location of the case file, e.g.
+// const stylesheet = 'assets/styles.css'
+// (I think)
+// I think this is done so that that value can be inserted into a
+// Stylesheet element, which can then add an HTML style tag referencing
+// that stylesheet
+import { createRequire } from 'module';
+import { dirname } from 'path';
+import slash from 'slash';
+import { cliError } from 'tungsten/cliOutput.js';
+import { throwError } from 'tungsten/throwError.js';
+import { existsSync } from 'fs';
+import { isBareImport } from "./isBareImport.js";
+export function MakeBabelTransformCssImports(opts) {
+  return function BabelTransformCssImports(babel) {
+    const t = babel.types;
+    //let projectDir
+    let filename;
+    let require;
+    return {
+      pre: function (state) {
+        const stateFilename = state.opts.filename;
+        if (typeof stateFilename !== 'string') {
+          throwError('BabelTransformCssImports', 'Babel did not provide a filename');
+        }
+        filename = stateFilename;
+        //cliWarn(`MakeBabelTransformCssImports`, filename)
+        require = createRequire(filename);
+      },
+      visitor: {
+        ImportDeclaration: function (path /*, state*/) {
+          const importTarget = path.node.source.value;
+          let location = importTarget;
+          //.slice(2) // remove ./
+          if (location.endsWith('.css') || location.endsWith('.scss') || location.endsWith('.sass')) {
+            //console.log('found a css import in', filename)
+            //console.log('absCodeDir', opts.absCodeDir)
+            //console.log('found stylesheet import', location)
+            let bare = false;
+            if (isBareImport(location)) {
+              //bare = true
+              // cliAlert('Bare CSS import:', location)
+              // cliInfo(`try to resolve from ${opts.projectDir}`)
+              // console.log(3)
+              // //location = 'tungsten-range-slider-input/dist/rangeSlider.css'
+              // const resolvedLocation = require.resolve(location, { paths: [opts.projectDir] })
+              // console.log(5)
+              // cliAlert('resolved loc:', resolvedLocation)
+            } else {
+              if (location.startsWith('./')) {
+                //console.log('dirname', dirname(filename.slice(opts.absCodeDir.length)))
+                let fileRelDir = slash(dirname(filename.slice(opts.absCodeDir.length)));
+                if (fileRelDir === '/') fileRelDir = '';
+                //console.log('dirname', fileRelDir)
+                //console.log('location without dot', location.slice(1))
+                location = fileRelDir + location.slice(1); // remove .
+                //console.log('new location', location)
+              } else if (location.startsWith('../')) {
+                let fileRelDir = slash(dirname(filename.slice(opts.absCodeDir.length)));
+                if (fileRelDir === '/') fileRelDir = '';
+                location = fileRelDir + '/' + location;
+              }
+              const cssPath = opts.absSourceDir + location;
+              //console.log('BabelTransformCssImports searching for css file', cssPath)
+              if (!existsSync(cssPath)) {
+                throwError('BabelTransformCssImports', `Could not find stylesheet '${importTarget}'`);
+              }
+            }
+            //console.log('css import path.node.specifiers', path.node.specifiers)
+            const specifiers = path.node.specifiers;
+            const firstSpecifier = specifiers[0];
+            // !!! guard
+            if (firstSpecifier === undefined) {
+              cliError('Tungsten BabelTransformCssImports Error: ' + `CSS file '${location}' is not being imported to a variable.` + '\nCSS files should be imported like ' + '`import globalStyles from \'./style/global.css\'`' + '\nThen used in a <Stylesheet> component like ' + '`<Stylesheet>{globalStyles}</Stylesheet>`');
+              return;
+            }
+            if (specifiers.length >= 2) {
+              cliError('Tungsten BabelTransformCssImports Error: ' + `The import of CSS file '${location}' has too any specifiers.` + '\nOnly 1 specifier should be used, e.g. ' + '`import globalStyles from \'./style/global.css\'`');
+              return;
+            }
+            const varName = firstSpecifier.local.name;
+            const locationWithCssExt = location.slice(0, location.lastIndexOf('.')) + '.css';
+            const assignment = t.variableDeclaration('const', [t.variableDeclarator(t.identifier(varName), t.objectExpression([t.objectProperty(t.identifier('href'), t.stringLiteral(locationWithCssExt))]))]);
+            // if (bare) {
+            //     // replace the named import with an importless import,
+            //     // so that the imported var doesn't have a naming conflict with the
+            //     // created var, which would cause babel errors later on
+            //     path.replaceWith(t.importDeclaration([], t.stringLiteral(importTarget)))
+            //     path.skip() // skip to prevent the new node being processed again here
+            //     path.insertAfter(assignment)
+            // } else {
+            //     path.replaceWith(assignment)
+            // }
+            path.replaceWith(assignment);
+            // const baseDir = join(opts.projectDir, opts.codeDir)
+            // let importedFileLocations
+            // try {
+            //     importedFileLocations = calculateImportedStaticFileLocations(opts.projectDir, baseDir, state.filename, location)
+            // } catch (e) { 
+            //     if (e instanceof SxyFrameworkFileNotInBaseError) {
+            //         throw new TungstenError(
+            //             `SXY Framework, BabelTransformCssImport Error:`
+            //             + ` the file being processed does not appear to be in the code folder specified in your config`
+            //             + `\nFile being processed: ${state.filename}`
+            //             + `\nCode folder from config (or default): ${opts.codeDir}`
+            //             + `\nComplete base folder: ${baseDir}`
+            //         )
+            //     } else {
+            //         throw e
+            //     }
+            // }
+            // console.log('source', importedFileLocations.source)
+            // console.log('target', importedFileLocations.target)
+            // console.log('targetRel', importedFileLocations.targetRel)
+            // console.log('cwd', process.cwd())
+            // try {
+            //     mkdirSync(dirname(importedFileLocations.target), { recursive: true })
+            //     copyFileSync(importedFileLocations.source, importedFileLocations.target)
+            // } catch (e) {
+            //     console.log('Error copying: ', e)
+            // }
+          }
+        }
+      }
+      //post: function (state) {
+      //},
+    };
+  };
+}

package/dist/babelPlugins/BabelTransformDependencyImportsOld.d.ts

@@ -0,0 +1,16 @@
+import { Babel } from './BabelTypes.js';
+import { CallExpression, ImportDeclaration } from '@babel/types';
+import { NodePath } from '@babel/core';
+type Opts = {
+    packageDir: string;
+    filePath: string;
+};
+export declare function MakeBabelTransformDependencyImports(opts: Opts): (babel: Babel) => {
+    pre(): void;
+    visitor: {
+        ImportDeclaration: (path: NodePath<ImportDeclaration>) => void;
+        CallExpression(path: NodePath<CallExpression>): void;
+    };
+};
+export {};
+//# sourceMappingURL=BabelTransformDependencyImportsOld.d.ts.map

package/dist/babelPlugins/BabelTransformDependencyImportsOld.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BabelTransformDependencyImportsOld.d.ts","sourceRoot":"","sources":["../../src/babelPlugins/BabelTransformDependencyImportsOld.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAKvC,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAItC,KAAK,IAAI,GAAG;IACR,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,wBAAgB,mCAAmC,CAAC,IAAI,EAAE,IAAI,IACV,OAAO,KAAK;;;kCAsBb,QAAQ,CAAC,iBAAiB,CAAC;6BAQzC,QAAQ,CAAC,cAAc,CAAC;;EAgB5D"}

package/dist/babelPlugins/BabelTransformDependencyImportsOld.js

@@ -0,0 +1,56 @@
+// BabelTransformDependencyImports
+// exports MakeBabelTransformDependencyImports (function)
+//   arg 1: object {
+//      packageDir: string ??not sure
+//      filePath: string ?? location of the file being processed? why not used filename?
+//   }
+//
+// EDIT: doesn't appear to be currently used
+//
+// Seems to be used within tungsten files and node_modules
+// dependencies of tungsten, to rewrite bare imports (e.g. 'axios')
+// to relative imports e.g. '../../axios', pointing to local (and transpiled?)
+// copies of that package
+import { dirname, relative } from 'path';
+import slash from 'slash';
+import { createRequire } from 'module';
+export function MakeBabelTransformDependencyImports(opts) {
+  return function BabelTransformDependencyImports(babel) {
+    const t = babel.types;
+    //console.log('packageDir', opts.packageDir)
+    let require;
+    function getNewLocation(location) {
+      if (/^[a-zA-Z_]/.test(location)) {
+        const target = require.resolve(location);
+        return slash(relative(dirname(opts.filePath), target));
+      } else {
+        return location;
+      }
+    }
+    return {
+      pre() {
+        require = createRequire('file://' + opts.filePath);
+      },
+      visitor: {
+        ImportDeclaration: function (path) {
+          const location = path.node.source.value;
+          // if location is a bare import (a ref to a node module)
+          if (/^[a-zA-Z_]/.test(location)) {
+            path.node.source.value = getNewLocation(location); //slash(relative(dirname(opts.filePath), target))
+          }
+        },
+        CallExpression(path) {
+          if (path.node.callee.type === 'Import') {
+            const source = path.node.arguments[0];
+            if (source === undefined || source.type !== 'StringLiteral') {
+              throw new Error('BabelTransformDependencyImports error: dynamic import must have a string literal as its first argument');
+            }
+            const location = source.value;
+            path.node.arguments[0] = t.stringLiteral(getNewLocation(location));
+            //
+          }
+        }
+      }
+    };
+  };
+}