DEV Community: DougAnderson444

Rust Cargo Run exit code: 0xc0000135, STATUS_DLL_NOT_FOUND

DougAnderson444 — Sun, 26 Mar 2023 16:50:38 +0000

This is probably happening in Powershell.

If you run this in bash MINGW64:

$ ldd target/debug/<app>.exe

This should give you a list of .dll files. Those DLLs should be in your target folder, but they aren't.

ntdll.dll => /c/WINDOWS/SYSTEM32/ntdll.dll (0x7ffb1fd10000)
KERNEL32.DLL => /c/WINDOWS/System32/KERNEL32.DLL (0x7ffb1fb70000)
KERNELBASE.dll => /c/WINDOWS/System32/KERNELBASE.dll (0x7ffb1d5f0000)
apphelp.dll => /c/WINDOWS/SYSTEM32/apphelp.dll (0x7ffb1a980000)
bcrypt.dll => /c/WINDOWS/System32/bcrypt.dll (0x7ffb1d410000)
ucrtbase.dll => /c/WINDOWS/System32/ucrtbase.dll (0x7ffb1dab0000)
VCRUNTIME140.dll => /c/WINDOWS/SYSTEM32/VCRUNTIME140.dll (0x7ffb03f60000)
libssl-1_1-x64.dll => /mingw64/bin/libssl-1_1-x64.dll (0x7ffae26f0000)
msvcrt.dll => /c/WINDOWS/System32/msvcrt.dll (0x7ffb1fad0000)
libcrypto-1_1-x64.dll => /mingw64/bin/libcrypto-1_1-x64.dll (0x7ffaaf360000)
ADVAPI32.dll => /c/WINDOWS/System32/ADVAPI32.dll (0x7ffb1e950000)
sechost.dll => /c/WINDOWS/System32/sechost.dll (0x7ffb1fc30000)
RPCRT4.dll => /c/WINDOWS/System32/RPCRT4.dll (0x7ffb1f0c0000)
USER32.dll => /c/WINDOWS/System32/USER32.dll (0x7ffb1e7a0000)
win32u.dll => /c/WINDOWS/System32/win32u.dll (0x7ffb1da80000)
GDI32.dll => /c/WINDOWS/System32/GDI32.dll (0x7ffb1eaa0000)
gdi32full.dll => /c/WINDOWS/System32/gdi32full.dll (0x7ffb1dc50000)
msvcp_win.dll => /c/WINDOWS/System32/msvcp_win.dll (0x7ffb1dbb0000)
WS2_32.dll => /c/WINDOWS/System32/WS2_32.dll (0x7ffb1fa60000)

See LDD for more details.

Turns out there are 2 ways to link libraries into your rust executable: dynamic (hence DLL: Dynamic Linked Library) and static.

To avoid any DLL issues on the target platform, we can set up our build target to use static linked libraries.

How do we do that for something like OpenSSL?

First we install that static version of OpenSSL for windows:

vcpkg install openssl:x64-windows-static

*Note that "static" word at the end.

Using vcpkg to install this gives us a directory where we can point our system env variables:

$env:OPENSSL_STATIC=1
$env:OPENSSL_NO_VENDOR=1
$env:OPENSSL_DIR="C:\...\<vcpkg>\installed\x64-windows-static"
$env:OPENSSL_INCLUDE_DIR="C:\Users\douga\Documents2\code\vcpkg-1\installed\x64-windows-static\include"

In PowerShell we can set out environment variables to all say "static" and "here's our static installation from vcpkg"

Now when we cargo run our app is built using the static versions of OpenSSL based on out ENV VARS and the installation these point to, meaning our target environment doesn't need these DLL files available and our app will run without them.

Sveltekit Purge Unused CSS

DougAnderson444 — Fri, 23 Sep 2022 10:37:27 +0000

After a long while of trying to find the scripts that purge css from Svelte files, I finally just wrote my own script.

I have this problem because I am building individual Svelte components with Tailwindcss, and when I svelte-package them up, ALL the css for the whole library goes in each component, leading to massive amounts of unused css.

// component.svelte
<style lang="postcss">
</style>

// postcss.config.js
plugins: {
    'postcss-import': {}, // so we can use: <style lang="postcss"> @import '../app.css' </style>
    tailwindcss: {},
    autoprefixer: {}
    }

// svelte.config.js
// puts all tailwindcss in each component :/
preprocess: [
    preprocess({
        // postcss: true,
        postcss: {
            configFilePath: path.resolve(__dirname, './postcss.config.js'),
            prependData: `@import '${path.resolve('./src/utilities.css')}';`
        }
    })
],

The above setup is great for packaging individual components, except all the unused css...

Most of the solutions on the internet use @fullhuman/postcss-purgecss but I just couldn't get it to work on .svelte files, no matter what I did.

Then I realized that with a bit of regex I could probably just parse through the file, and remove any css that didn't match.

Here's the code:

// purge.js

// iterate through all .svelte files in ./package directory
import path from 'path';
import fs from 'fs';
import { fileURLToPath } from 'url';
import { dirname } from 'path';
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const packageDir = path.resolve(__dirname, './package');
const files = fs.readdirSync(packageDir);
const svelteFiles = files.filter((file) => file.endsWith('.svelte'));

svelteFiles.forEach((file) => {
    // remove all unused css in <style> tags from this svelte file
    const filePath = path.resolve(packageDir, file);
    const fileContents = fs.readFileSync(filePath, 'utf8');
    const styleTagRegex = /<style[^]+?<\/style>/gi;
    const styleTagContents = fileContents.match(styleTagRegex);

    // get rest of file contents
    const restOfFile = fileContents.replace(styleTagRegex, '');

    // skip over any components without style
    if (!styleTagContents) return;

    // get content between <style> tags
    const styleTagContentRegex = /<style[^]+?<\/style>/i;
    const styleTagContent = styleTagContents[0].match(styleTagContentRegex)[0];
    // console.log('styleTagContent', styleTagContent);

    // regex parse out each class statement, keep the leading . and the {} block
    const classRegex = /\.([a-zA-Z0-9_-]+)[^]+?{[^]+?}/gi;
    const classStatements = styleTagContent.match(classRegex);

    // for each class Statement NoNewLines
    // check if it is used in any of the svelte files classes
    // if not, remove it from the style tag
    // if so, keep it in the style tag
    // write the new style tag to the file

    const keep = classStatements.map((statement) => {
        const className = statement.match(/\.([a-zA-Z0-9_-]+)/i)[1];

        // check if the className appears as a whole word in between quotes of class=""
        // exclude hyphenated matches
        // only match on whole words surrounded by spaces or quotes
        const regex = new RegExp(`class="[^]*?(\\s|")${className}(\\s|")[^]*?"`, 'gi');
        return restOfFile.match(regex) ? statement : '';
    });

    // join keep together
    const newStyleTagContent = keep.join('');

    // wrap in <style> tags
    const newStyleTagBlock = `<style>${newStyleTagContent}</style>`;

    // replace old style tag with new style tag
    const newFileContents = fileContents.replace(styleTagContent, newStyleTagBlock);

    // write new file contents to file
    fs.writeFileSync(filePath, newFileContents);
});

Hope that helps you too!

Isomorphic + Rollup + Package.json

DougAnderson444 — Thu, 22 Oct 2020 14:41:46 +0000

Isomorphic + Rollup + Package.json

It took me a while to piece this all together, so I'm mainly posting these notes here for myself as I go along.

We want same code for nodejs and the browser, so in package.json we set:

// package.json
...
"main": "dist/index.js",
"browser": "lib/index.browser.js"
...

But maybe we want both ES and UMD modules available to the browser user, so we break browser out:

// package.json -  browser expanded
  "main": "dist/index.js",
  "module": "dist/index.esm.js",
  "browser":{ 
    "dist/index.js": "dist/index.browser.js",
    "dist/index.esm.js": "dist/index.browser.esm.js"
  },

Now, depending on how the user imports the package, will determine what file they get. If they use index.js from nodejs the user will get dist/index.js but if they use index.js from the browser they will get dist/index.browser.js!

Make the files

We can use Rollupjs to make these files

// rollup.config.js
...
import pkg from './package.json'
...
export default [
    // browser-friendly builds
    {
        input: 'src/main.js',
        output: [{
            name: 'myPkgName',
            file: pkg.browser['dist/index.js'], // from package.json
            format: 'umd'
        },
        {
            file: pkg.browser['dist/index.esm.js'], // from package.json
            format: 'es'
        }]
        plugins: [
            resolve(), // so Rollup can bundle modules
            babel({
                exclude: ['node_modules/**']
            }),
            commonjs(), // so Rollup can convert to ES module
        ]
    },

    // CommonJS (for Node) and ES module (for bundlers) build.
    // (We could have three entries in the configuration array
    // instead of two, but it's quicker to generate multiple
    // builds from a single configuration where possible, using
    // an array for the `output` option, where we can specify 
    // `file` and `format` for each target)
    {
        input: 'src/main.js',
        output: [
            { file: pkg.main, format: 'cjs' }, // from package.json
            { file: pkg.module, format: 'es' } // from package.json
        ],
        plugins: [
            babel({
                exclude: ['node_modules/**']
            })
        ]
    }
];

Use the ES Module

Now that you have an ES module, you can import it into your code

import NamedExport from 'myCoolModule'

Bundle your code (again) with Rollup in the same way, perhaps using a front end framework like Svelte.

// bundled output from a framework, like Svelte
build/bundle.js

Now that you have all these modules, and they are bundled into the code, they can also be used for cool things like code-splitting and dynamic imports.

// index.html
<!-- This standard way only works if the browser 
is modern and supports dynamic imports -->
<script defer type="module" src='/build/main.js'></script>

Dynamic Import an ES module in any browser

Use dimport:

<!-- https://www.npmjs.com/package/dimport -->
<script defer type="module" src="https://unpkg.com/dimport?module"
data-main="/build/main.js"></script>

<script defer type="nomodule" src="https://unpkg.com/dimport/nomodule" 
data-main="/build/main.js"></script>

Refs:
dimport
Dynamic Imports
Svelte Code Splitting
Svelte Code Splitting without Sapper
Code Splitting Routify
Target based Dependency Transpiling
Package.json Browsr Swithcing
Pkg.json Browser Tests
Rollup Config: Multi-inputs
Rollup Config: babel