Code Monkey home page Code Monkey logo

Comments (11)

jpvincent avatar jpvincent commented on June 18, 2024 1

Also : if the .vue file contains the full template, but the JS is still referenced via a <script> tag, it also fails.
We had to copy the code of this package and have our own function

var fs = require('fs');
const customFreddie = (src, filePath) => {
	var output = src
	//console.log("\n\n\n\n\n\n\n\n\n\n\n" +filePath + "\n\n\n\n\n\n\n")
	// const vueFileName = path.basename(filePath)
	const dirName = path.dirname(filePath)
	var attribute = 'src'
	var regex = new RegExp("<script?\\w+(?:\\s+(?:" + attribute + "=\"([^\"]*)\")|[^\\s>]+|\\s+)*>","gi")
	var matches
	while ( matches = regex.exec(src) )
	{
		if (matches[0] != '<script>') {
			let jsFileName = matches[1]
			let jsCode = fs.readFileSync(path.resolve(dirName, jsFileName), 'utf8')
			//console.log('\n\n\n\n\n\n\n\n\n\n'+jsCode+'\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n')
			output += '<script>' + jsCode + '</script>'
		}
	}
	return output
}

Sure, we hope to have the time to PR this repository with this code one day

from jest-vue-preprocessor.

vire avatar vire commented on June 18, 2024 1

@jpvincent I'll take a look in upcoming days, I was OoO for a week so need to reconcile first, but as it's an easy fix that shouldn't be an issue.

from jest-vue-preprocessor.

vladferix avatar vladferix commented on June 18, 2024

+1. Having the same issue

from jest-vue-preprocessor.

brenohq avatar brenohq commented on June 18, 2024

+1. Having the same issue

from jest-vue-preprocessor.

pepf avatar pepf commented on June 18, 2024

The vue-loader source code would serve as a better example on how to solve this issue.
See here for the html solution and here for the js solution. There should be no need for regex checking at least, and it should be relatively easy to put the contents of the referenced files back in one file and continue as before.

from jest-vue-preprocessor.

djwglpuppy avatar djwglpuppy commented on June 18, 2024

I actually Created a fix ...

/* eslint-env node */
const fs = require('fs');
const path = require('path');
const vueCompiler = require('vue-template-compiler');
const vueNextCompiler = require('vue-template-es2015-compiler');
const babelCore = require('babel-core');
const findBabelConfig = require('find-babel-config');
const tsc = require('typescript');
const crypto = require('crypto');


const getActualSource = (src, file, returnObj = true) => {
  const { script, template } = vueCompiler.parseComponent(src, { pad: true });

  if (script !== null && script.content === '' && script.src !== '') {
    script.content = fs.readFileSync(path.resolve(path.dirname(file), script.src), 'utf8');
  }

  if (template !== null && template.content === '' && template.src !== '') {
    template.content = fs.readFileSync(path.resolve(path.dirname(file), template.src), 'utf8');
  }
  if (returnObj) {
    return { script, template };
  }
  return `${script !== null ? script.content : ''}${template !== null ? template.content : ''}`;
};

function buildCacheKey(file) {
  const files = [file];
  return files.reduce(
    (src, fileName) => src + fs.readFileSync(fileName)
  );
}

const createCacheKey = transformFile => {
  const cacheKey = buildCacheKey(transformFile);
  return (src, file, configString, options) => {
    return crypto
      .createHash('md5')
      .update(cacheKey)
      .update(getActualSource(src, file, false) + file + configString)
      .update(options && options.instrument ? 'instrument' : '')
      .digest('hex');
  };
};

// Blah Blah Blah ... existing code stuff 

module.exports = {
  process(src, filePath) {
    // code copied from https://github.com/locoslab/vue-typescript-jest/blob/master/preprocessor.js
    // LICENSE MIT
    // @author https://github.com/locobert
    // heavily based on vueify (Copyright (c) 2014-2016 Evan You)
    const { script, template } = getActualSource(src, filePath);

    const transformedScript = script ? transforms[script.lang || 'babel'](script.content) : '';
    let render;
    let staticRenderFns;
    if (template) {
      const HTML = extractHTML(template, filePath);
      const res = HTML && vueCompiler.compile(HTML);
      render = stringifyRender(res.render);
      staticRenderFns = stringifyStaticRender(res.staticRenderFns);
    }

    return generateOutput(transformedScript, render, staticRenderFns);
  },
  getCacheKey: createCacheKey(__filename)
};

Note that in order for this to work ... I had to write the getCacheKey function to update if src files are changed.

I can't help more than this ... but feel free to look at this comment all you want :)

from jest-vue-preprocessor.

grofzero avatar grofzero commented on June 18, 2024

@djwglpuppy Could you copy the whole code here? thx

from jest-vue-preprocessor.

djwglpuppy avatar djwglpuppy commented on June 18, 2024

@grofzero ... the code omitted is the code currently in the index.js file ... so everything between the imports and the exports. Sorry I can’t do more than that . Hope that helps

from jest-vue-preprocessor.

grofzero avatar grofzero commented on June 18, 2024

@djwglpuppy I just could'n find the generateOutput function anywhere

from jest-vue-preprocessor.

djwglpuppy avatar djwglpuppy commented on June 18, 2024

@grofzero ... looks like they refactored (though are not supporting src yet? ) . Here is the older file with that function

https://github.com/vire/jest-vue-preprocessor/blob/cd27677520697910be1a15d457e1d2d1fbc0cd02/index.js

from jest-vue-preprocessor.

grofzero avatar grofzero commented on June 18, 2024

@djwglpuppy It still doesn't support src, and thank you very much:)

from jest-vue-preprocessor.

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.